user6875213 user6875213 - 2 months ago 6
CSS Question

Is there a way to change float on different screen size?

I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!

Answer

What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.

.div img {
    float: left;
}

/*This will cause the img receive float none rule when screen is smaller than 768px*/
@media only screen and (max-width: 768px) {
    .div img {
        float: none;
    }
}

There is a complete guide you can check out right here.