Footer only works when Zoom Text Only is set in Firefox, text overflows if no Zoom Text Only?

Viewed 20

I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:

body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}

a {
text-decoration: none;
}


 
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}

img.logo1 {
width: 200px;
}

.wrapper {
border: 2px solid;
}

.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}

footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}

footer.caautos h2, footer.caautos h3 {
margin: 10px;
}


div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}



div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}

div.content p {
margin-left: 5px;
}

.results-vehicleresult {
margin: 20px;
}

.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}


.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}

.columns-vehicleresult .column {
flex: 33.33%;
}


/* 
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
 */

.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}

.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}

h1.eurola {
font-size: 240%;
}


.vehiclesold {
color: red;
}

picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}

/* 
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
 */

/* 
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
 */
 
/* 
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
 */
 
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}

picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}

ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}


ul.mauen li {
  float: left;
}

ul.mauen a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}

.imagallery1 li {
display: inline;
margin: 0;
}

/* 
.imagallery1 img {
width: 20%;
height: auto;
}
 */
 
 .imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}

img.hald {
width: 230px;
}

div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}

.logo-112 blockquote {
font-weight: 700;
}

img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
    <link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>

<div class="results-vehicleresult">

<div class="columns-vehicleresult">
   <picture>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
   </picture>
   <div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold  <b>&pound;3995</b></p>
  </div>  
  <div class="column">
  <ul class="imagallery1">
   </ul>
   </div>
</div>

 <div class="columns-vehicleresult">
   <picture>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
   </picture>
   <div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold  <b>&pound;3995</b></p>
  </div>  
  <div class="column">
  <ul class="imagallery1">
   </ul>
   </div>
</div><div class="columns-vehicleresult">
   <picture>
   <img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
   </picture>
   <div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue  <b>&pound;3995</b></p>
  </div>  
  <div class="column">
  <ul class="imagallery1">
   </ul>
   </div>
</div>

</div>




</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>&#9990; 01909 496000</h1>
</div>
</footer>
&copy; 2022
</div>
</body>
</html>

For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?

It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.

1 Answers

when you change page zoom, the browser changes resolution. use @media for a specific resolution. you can read about that here.

Related