BlueOwlCreative » Topic: Custom CSS Mobile Responsiveness http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/feed/ Sat, 18 Jul 2026 17:41:43 +0000 http://bbpress.org/?v=2.5.3-5249 en-US http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32522 <![CDATA[Custom CSS Mobile Responsiveness]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32522 Wed, 07 Feb 2018 22:51:25 +0000 anoriega I added custom CSS to my site’s blog posts. Primarily changing the margin for the post description, so it was centered. I also changed the width and height of the featured images for blog posts.

The only issue is that for mobile, the pages are looking a bit strange. The blog images are cut off and when it comes to the paragraphs, after each word there is a break, making the page extremely long. A good page would be to compare this blog post of ours on desktop vs. mobile: http://aquilasw.com/2018/01/10/promoting-careful-not-kill-top-performers/

Can you help me keep my custom CSS in place while making the pages mobile responsive?

]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32525 <![CDATA[Reply To: Custom CSS Mobile Responsiveness]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32525 Thu, 08 Feb 2018 08:04:52 +0000 BlueOwl Hi there,

Sure, I would be happy to help. Why are you setting fixed width/height to your image container (.single .pic)?
I would instead set max-width only and do it in a media query only for bix screens! Like so for example:

@media only screen and (min-width: 1018px) {
  .single .pic {
    max-width: 600px;
  }
}

Same for the .post_description, put that in the same media query so it takes place only for big screens.

@media only screen and (min-width: 1018px) {
  .single .pic {
    max-width: 600px;
  }
  .post_description {
    margin: 50px 150px;
    width: auto;
  }
}

"after each word there is a break" ? What do you mean here? :)

]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32531 <![CDATA[Reply To: Custom CSS Mobile Responsiveness]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32531 Thu, 08 Feb 2018 14:31:51 +0000 anoriega Ok, great thank you! The picture is responsive and looks good. The only thing is the actual paragraphs look weird on mobile. For example, it’s showing up like this on a mobile screen:

One
of
the
biggest
mistakes
I
have
seen

]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32532 <![CDATA[Reply To: Custom CSS Mobile Responsiveness]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32532 Fri, 09 Feb 2018 11:27:05 +0000 BlueOwl Yes, that’s cuz of the post_description CSS you added, remove it and add it as I showed (only for big screens). :)

]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32563 <![CDATA[Reply To: Custom CSS Mobile Responsiveness]]> http://blueowlcreative.com/support_wp/forums/topic/custom-css-mobile-responsiveness/#post-32563 Wed, 14 Feb 2018 22:08:05 +0000 anoriega Thank you for your help! Makes complete sense and worked! :)

]]>