I have a site I am working on for a client. I am using Skeleton for the responsive layout. There are two images in the footer area that in larger browsers float left and right. On smaller screens I want them to be aligned center under the other content.
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
photo_one {
float: none;
}
photo_two {
float: none;
}
}
The code above does not do what I want. What do I need to put in order for this to work? Thanks.
Are “photo_one” and “photo_two” classes or IDs? You don’t say in your code. You either need a dot before each or a #. If that doesn’t help, we need to see your HTML too.
Oops sorry…they are classes. So I would use a . I did that and it worked with the smallest width. I can’t get it to work with the width already mentioned. They still float left and right but are staggered.
It works because, at that width, you set the image container to the width of the images (more or less) so that the images have no option but to sit vertically.
In the scenario where they are staggered, the container is some 748px wide, so the images move as far left and right as they can within that.