Divi WordPress Theme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Reply To: How to optimize header for mobile fit

Discussion in 'Misc WordPress Requests' started by George Appiah, Dec 12, 2017.

  1. George Appiah


    Reply To: How to optimize header for mobile fit, by George Appiah


    Sorry for the delay. I’ve had this tab open in my Chrome browser for days, but I’ve been so busy here

    The background image is added inline. So that makes it a bit tricky. Let’s first add:

    .blog-entry-header {
    background-size: contain !important;

    This will set the logo size to small for ALL screens. Though the use of !important is generally not recommended, we need it in your case to override the inline style.

    Now let’s restore the larger logo for larger screens:

    @media screen and (min-width: 992px) {
    .home.blog .blog-entry-header {
    background-size: cover !important;

    Please note that I picked the 992px break out point from your stylesheet. Feel free to change this to a different breakout out point.

    The “responsive section” you mentioned seems to be a feature of your theme — which I don’t have — so I’m not sure how that works.

    But you can add the above CSS code snippets anywhere that you can add custom CSS code. Eg. in your child theme’s style.css file, in your active theme’s custom CSS section in the dashboard (if any), in WordPress Customizer’s Additional CSS section (Appearance => Customize => Additional CSS), in JetPack’s Custom CSS section, etc, etc, etc.

    Kindly try it and let me know what happens — especially if the use of !important creates any unintended effect.

    Reply To: How to optimize header for mobile fit

Share This Page

Monarch Social Sharing Plugin