Jumbotron image non responsive

Illdy
1

Hi there is there anyway someone could help make my jumbotron image responsive.

My site is mrldesign.co.uk

I have some custom CSS I found on another page, but the call to actions were completely out of sync and far down the page as the jumbotron image became smaller.

2

Hello,

To fix the call to action top space you should use this CSS:

@media only screen and (max-width: 767px){
    #header .bottom-header {
        padding-top: 30px;
        padding-bottom: 50px;
    }
}

This should do the trick!
If there’s anything else you need to modify on mobile display please provide some screenshots and I’ll do my best to assist you further.

Regards

3

Hey there thanks for the code,

Unfortuntaley it seem to have made no different to the jumbotron image on my mobile device.

Website address is:
mrldesign.co.uk

4

Hello,

Can you please clue me in about where you added the code?

It does not seems to be loaded in the website.

If it’s not working, you could use important for it:


@media only screen and (max-width: 767px){
    #header .bottom-header {
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }
}

This code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a Custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.

Regards

5

I added it into the CSS editor. I deleted it when I tried it earlier, its back in now. Stil not working.

6

Hello,

Don’t forget to use the second code I provided, the one with !important.

If nothing works, could you please send me temporary admin dashboard access via a private message so I can have a look for myself?

Thank you

7

Hello,

Don’t forget to use the second code I provided, the one with !important.

If nothing works, could you please send me temporary admin dashboard access via a private message so I can have a look for myself?

Thank you

8

Hey its still not working. Not sure if its something to do with the size of my image???

9

Hello,

As far as I can tell the code is working alright now, just that it is for resolutions smaller than 768, the tablets standards.

If you need it for bigger displays just change the media query from:

@media only screen and (max-width: 767px)

to 1024 or bigger

@media only screen and (max-width: 1024px)

Regards

10

Hi Mrldesign,

i am having the same issue on my website, how did you manage to solve the problem on your website? Many thanks!

11

hi, how do i remove the name of the theme from the future of the pages? thx