CODEWITHSUNDEEP
htmlcss
Seth C.
Seth C.

Reputation: 5

How do I keep a CSS container the same size?

I have 6 images next to each other in two rows. I used a CSS container to center it (couldn't use padding). However, when I shrink the screen, since the margin is set to auto, the container shrinks opposed to the blank space around the container. You can see this here . The blue is just there to show the container. The images need to stay in that order until it becomes physically impossible for them to stay there. Any help would be appreciated! Thank you in advanced!

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Featured Industries</title>
</head>
<style>
.center {
    margin: auto;
    width: 66%;
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}
.img {
    float: left;
}
a:hover img {
    position: relative;
    z-index: 1;
    transition: -webkit-box-shadow 0.3s ease-in-out;
    -webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
    box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
}
</style>

Upvotes: 0

Views: 3819

Answers (2)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17481

You have the container size in %, which means, in this case, it will always be 66% of the document width that matches the window's width. That's why, it shrinks when you change the window size. If you set the container width to double the width of the images, it will not shrink.

So, according to your example, this will work:

.center {
    margin: auto;
    width: 622px; /* (311 x 2) */
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

Now you have to solve another problem when they don't fit in the windows, like in mobile phones for example. Then you can use CSS Media Queries. So now let's add another rule for when there is no space for the 2 images column.

/* This is the default behavior (mobile first) */
.center {
    margin: auto;
    width: 311px; /* 1 column by default */
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

/* Let's now modify the container size when there is space */
/* for 2 image columns */
@media screen and (min-width: 622px) {
    .center {
        width: 622px; /* 1 column by default */
    }
}

Upvotes: 1

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4449

Use this class:

.center {
    margin: auto;
    width: 933px;
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

If you set the width to the 66% it will depend on the father width, bit if you just set it to a number of px it will remain the same size

Upvotes: 0

Related Questions