Problem adding media queries into custom CSS box.

Resolved Josh_nffc
(@josh_nffc)

10 years, 6 months ago
Hi there,

First of all thanks for all the technical support on this forum, it’s been super helpful so far!

I’ve created a default page, with the body copy wrapping around an image. The image is ‘floated’ to the left to allow the text to sit on the right.

The problem is that on smaller screens, the text begins to squeeze too tightly beside the image and becomes unreadable. At this point, I’m wanting to add a media query to force the text below the image, instead of beside it.

Currently I’m trying to add this code into the Custom CSS Box area:
```
@media screen and (max-width: 720px)
{ img {
    float: none; }
}
```
This doesn’t seem to be working. Is there a problem with my code?
I’m hoping there is a simple way to achieve what I’m after.

Can anyone help me out?

Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)

hannah
(@hannahritner)

10 years, 6 months ago

Hey,
Do you mind posting a link?
Thanks!

Hannah

Thread Starter Josh_nffc
(@josh_nffc)

10 years, 6 months ago

Hi Hannah,

Here is the link:
http://Www.joshclough.design/about

As you pull the screen size smaller, you’ll see the texts gets too tight and looks awkward next to the image. Once it gets to around 740px I want the text to snap underneath the image.

Thanks for your help Hannah.
hannah
(@hannahritner)

10 years, 6 months ago
Hey,
Try adding this css:
```
@media (max-width: 720px) {
.entry-content img {
    width: 100%;
}
}
```
Does that work for you?

Hannah
Thread Starter Josh_nffc
(@josh_nffc)

10 years, 6 months ago

Hi Hannah,

Thanks for your help on this. I had previously tried the img width 100% solution that you have suggested, from reading elsewhere. While it does solve the problem with the text, it also makes the image a little too large for this screen size. (no one should have to experience my face that big on their screen! ha)

Ideally I’d like to just override the float settings on the image, so that the text defaults back underneath again, leaving the image at the same size. However if this is going to re-quire more than just a bit of code, i’ll just have to work on the media Q snap point to find a good compromise.

Thanks again for all your help on this forum, it’s been a really useful resource!
Ben Ritner – Kadence WP
(@britner)

10 years, 6 months ago
Hey,
So it looks like you’ve added inline styling for the image to float. Instead of that when you add the image to your page choose the align options in the add media popup. What that does is give you a class that has float left as one of the class styles. This works better because then overriding you can just use css like this:
```
@media (max-width: 720px) {
.entry-content img.alignleft {
    float:none;
margin: 0 auto;
}
}
```
To override the inline you have to use !important in your css and it’s better if you can control with a class then like that.

Hope that helps,
Kadence Themes
Thread Starter Josh_nffc
(@josh_nffc)

10 years, 5 months ago

Great, thanks for all your help!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Problem adding media queries into custom CSS box.’ is closed to new replies.

Tags