Customize default zoom settings with Cascading Style Sheets (CSS)

Question

Customize default zoom settings with Cascading Style Sheets (CSS)

body{
  margin-bottom: 10%;
  margin-left: 10%;
  width:80%;
  color: #264653;
  position: relative;
}
#photo{
  border-radius: 70%;
  position: absolute;
  left: 25%;
  top: 50px;
}
.left1{
  margin-top: 10%;
  background-color: #264653;
  width : 30%;
  color: white;
  position: relative;
}
.left2{
  background-color: #264653;
  width : 30%;
  padding-bottom: 20%;
  padding-top: 25%;
  padding-left: 1.5%;
  color:white;
  font-size: 20px;
  text-indent: 12px;
}
#title{
  text-align: center;
  position: absolute;
  left: 31.5%;
  top: 0;
  font-size: 25px;
  border: 1px solid white;
  padding : 20px 175px;
  background-color: white;
  color:#264653;
}
.right{
  position: absolute;
  left:35%;
  top : 30%;
  font-size: 20px;
  font-weight: bold;
  width: 60%;
}
.article{
  display: block;
  background-color: #264653;
  text-transform: lowercase;
  font-variant: small-caps;
  padding-left: 20px;
  font-size: 100%;
  margin-right: 20%;
  width: 90%;
}

.annee{
  display: inline-block;
  width: 15%;
  font-weight: bold;

}

Upon excessive zooming, the webpage can lose its original design with images and text appearing mashed up together.

To maintain the original design even when zoomed in excessively, what steps can be taken?

Note: Included is the provided code, seeking clarification on potential issues like the use of "position".

html css zooming

Answer 1

Answer №1

Consider implementing a Responsive Design for your website

https://i.stack.imgur.com/uJIgQ.png

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>By setting the CSS width property as a percentage, images can scale based on browser window size. Test by resizing the window.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

Answer 2

Consider implementing a Responsive Design for your website

https://i.stack.imgur.com/uJIgQ.png

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>By setting the CSS width property as a percentage, images can scale based on browser window size. Test by resizing the window.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

Answer 3

Answer №2

It seems like you haven't shared any code related to your design, making your question quite broad as it relies heavily on the layout and styles you have implemented. Below is a sample code snippet along with some tips that may assist you in resolving your issue:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width: 1000px;
    background-color: #4b8ff0;
    color: white;
    margin: 20px auto;
}

.container::after {
    content: "";
    display: table;
    clear: both
}

.leftTag {
    float: left;
    width: 25%;
    height: 360px;
    background-color: #7f000a;
}

.rightTag {
    float: right;
    width: 70%;
    height: 360px;
    background-color: #123456;
}

@media only screen and (max-width: 854px) {
    .container {
        width: 750px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>zoom-file</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
       <div class="leftTag">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique vel ex, quis sint at accusamus labore sit.</p>
       </div>
       
       <div class="rightTag">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis reiciendis fuga veritatis quaerat praesentium ipsa saepe commodi placeat atque provident vitae illum molestiae, adipisci repudiandae nesciunt ducimus sit ipsam ea quibusdam architecto ut qui beatae! Numquam vel mollitia, expedita iure est. Est voluptatibus, minima obcaecati accusamus, libero aperiam fugiat, repellat a hic deleniti quia maxime.</p>
       </div>
   </div>
    
</body>
</html>

The provided example showcases a simple container with two columns placed side by side using the "float" property. When zooming in, you will notice that the width of the ".container" changes to 750px due to the "@media" rule in CSS. You can learn more about it here.

Additional helpful links include resources on JavaScript's "resize" method and window width:
https://www.w3schools.com/jsref/event_onresize.asp
https://www.w3schools.com/jsref/prop_win_innerheight.asp

Lastly, consider utilizing relative units (e.g., width:45%) to establish relative sizes for tags compared to their parent elements. This approach minimizes adjustments needed for varying window sizes since browser window width changes when zooming in or out.

Answer 4

It seems like you haven't shared any code related to your design, making your question quite broad as it relies heavily on the layout and styles you have implemented. Below is a sample code snippet along with some tips that may assist you in resolving your issue:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width: 1000px;
    background-color: #4b8ff0;
    color: white;
    margin: 20px auto;
}

.container::after {
    content: "";
    display: table;
    clear: both
}

.leftTag {
    float: left;
    width: 25%;
    height: 360px;
    background-color: #7f000a;
}

.rightTag {
    float: right;
    width: 70%;
    height: 360px;
    background-color: #123456;
}

@media only screen and (max-width: 854px) {
    .container {
        width: 750px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>zoom-file</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
       <div class="leftTag">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique vel ex, quis sint at accusamus labore sit.</p>
       </div>
       
       <div class="rightTag">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis reiciendis fuga veritatis quaerat praesentium ipsa saepe commodi placeat atque provident vitae illum molestiae, adipisci repudiandae nesciunt ducimus sit ipsam ea quibusdam architecto ut qui beatae! Numquam vel mollitia, expedita iure est. Est voluptatibus, minima obcaecati accusamus, libero aperiam fugiat, repellat a hic deleniti quia maxime.</p>
       </div>
   </div>
    
</body>
</html>

The provided example showcases a simple container with two columns placed side by side using the "float" property. When zooming in, you will notice that the width of the ".container" changes to 750px due to the "@media" rule in CSS. You can learn more about it here.

Additional helpful links include resources on JavaScript's "resize" method and window width:
https://www.w3schools.com/jsref/event_onresize.asp
https://www.w3schools.com/jsref/prop_win_innerheight.asp

Lastly, consider utilizing relative units (e.g., width:45%) to establish relative sizes for tags compared to their parent elements. This approach minimizes adjustments needed for varying window sizes since browser window width changes when zooming in or out.

Answer 5

Answer №3

Hello @issou! To address your issue, it is recommended to convert all PX units to REM in order to ensure responsiveness. When setting values in PX, they remain fixed regardless of zoom level. However, using REM ensures that the size adjusts with the zoom level.

By default, 1rem equals 16px. You can also establish this conversion in the ::root element of your HTML page.

I hope this explanation is helpful. If you need further clarification or have more questions, feel free to reach out!

Answer 6

Hello @issou! To address your issue, it is recommended to convert all PX units to REM in order to ensure responsiveness. When setting values in PX, they remain fixed regardless of zoom level. However, using REM ensures that the size adjusts with the zoom level.

By default, 1rem equals 16px. You can also establish this conversion in the ::root element of your HTML page.

I hope this explanation is helpful. If you need further clarification or have more questions, feel free to reach out!

Customize default zoom settings with Cascading Style Sheets (CSS)

Answer №1

Answer №2

Answer №3

Similar questions

Identify and forward to the mobile-friendly version of the site

Horizontal compression applied to background image

- Customizing the width of each dropdown level in a unique way

Show XML data with namespaces - utilizing PHP

Beautiful ExpressionChangedAfterItHasBeenCheckedError

Tips for displaying only a list of folders in elfinder, a jquery file management plugin

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

Struggling to make a basic ajax request function correctly

Updating inner text content dynamically can be accomplished without relying on the use of the eval() function

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Original text: Default SVG styleRewritten text

Is it permissible to have <ul> tags within an H1 element?

Obtain the href attribute's value from an HTML document using Javascript

The positioning of sub-menu items is incorrect

What is the best way to transfer a JavaScript variable through a query string from one HTML page to another?

Manage the placement of elements using CSS

Date Selector Tool for Input Field

Utilize UI Kit to incorporate fluid margins dynamically

Is the use of div:after content really affecting the width? I am having trouble getting my transition to work

The HTML page won't stop refreshing