Title: Problem adding media queries into custom CSS box.
Last modified: August 30, 2016

---

# Problem adding media queries into custom CSS box.

 *  Resolved [Josh_nffc](https://wordpress.org/support/users/josh_nffc/)
 * (@josh_nffc)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/)
 * 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](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745065)
 * Hey,
    Do you mind posting a link? Thanks!
 * Hannah
 *  Thread Starter [Josh_nffc](https://wordpress.org/support/users/josh_nffc/)
 * (@josh_nffc)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745098)
 * Hi Hannah,
 * Here is the link:
    [http://Www.joshclough.design/about](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](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745137)
 * Hey,
    Try adding this css:
 *     ```
       @media (max-width: 720px) {
       .entry-content img {
           width: 100%;
       }
       }
       ```
   
 * Does that work for you?
 * Hannah
 *  Thread Starter [Josh_nffc](https://wordpress.org/support/users/josh_nffc/)
 * (@josh_nffc)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745155)
 * 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](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745216)
 * 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](https://wordpress.org/support/users/josh_nffc/)
 * (@josh_nffc)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745249)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/virtue/3.4.15/screenshot.png)
 * Virtue
 * [Support Threads](https://wordpress.org/support/theme/virtue/)
 * [Active Topics](https://wordpress.org/support/theme/virtue/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/virtue/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/virtue/reviews/)

## Tags

 * [float](https://wordpress.org/support/topic-tag/float/)
 * [media queries](https://wordpress.org/support/topic-tag/media-queries/)
 * [paragraph](https://wordpress.org/support/topic-tag/paragraph/)

 * 6 replies
 * 3 participants
 * Last reply from: [Josh_nffc](https://wordpress.org/support/users/josh_nffc/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/problem-adding-media-queries-into-custom-css-box/#post-6745249)
 * Status: resolved