header image not responsive to mobile

  • Hi,
    Firstly thank you if you can help ??
    I’m not an expert – but am finding my way round and have a child theme I’m using for changes.

    I’ve changed the header image – and used the recommended size 1280 x 416.
    It didn’t show properly…squashed it on both mobile and laptop views…
    I found some css online that I’ve added (shown below) that’s made it look how i want on laptop browsing…but it’s still squished on mobile.

    .blog-info {
    background: none repeat scroll 0 0 #1D1D1D;
    display: inline-block;
    padding: 20px;
    visibility: hidden;
    }

    .section {
    padding: 17% 0;
    position: relative;
    }

    Can you help?!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter oliviafletchie

    (@oliviafletchie)

    odd – my website link isn’t showing… here it is again
    https://www.flowingsuccess.com
    <a href=”https://www.flowingsuccess.com
    “>www.flowingsuccess.com

    Hey,

    Looks like if you look at line 2232 and 2358 theres:

    .header.section { padding: 30px 0; }

    .header.section { padding: 60px 0; }

    remove the 30px and 60 px so both read as:

    .header.section { padding: 0; }

    seemed to do the trick and get the header image looking as expected. Hope that helps.

    Thread Starter oliviafletchie

    (@oliviafletchie)

    Hi there,
    thanks for jumping on this so quickly.
    I put that code in my child theme (as been warned by death of web gurus not to touch the main stylesheet lol)
    and it’s removed the image completely….

    is there a way to do this that doesn’t involve playing in main style sheet? Im nervous as wouldn’t know how to reverse it if other problems arose as a result down the line…
    Thanks so much again

    Thread Starter oliviafletchie

    (@oliviafletchie)

    Hi all,
    does anyone else have an idea?
    The above suggestion is fab but doesn’t work in the child theme… which is where I want to make the changes…
    Thank you!

    Yep, I followed the above and it vanished. With the second padding above, i increased mine to 60px instead on decreased to 0px. Job done.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘header image not responsive to mobile’ is closed to new replies.