Can you help me on this issue for sizing? Jumbotron down to mobile size?

Hello first off thank you for having this forum as of late I have learned to fix all of my needs from others question’s and your guidance. This one though I cannot seem to get together. when I have My jumbotron image on my desktop computer it is fine. It’s even ok on my tablet size as i view it through the customize click on at the bottom except there is a large gap above it and below, but i do not see my menu words at the top now as i did when it was showing the desktop version?

On the mobile image you can see here it shows the whole image but the words are now way bigger than what is needed but i want to make sure if i shrink them down to fit the mobile image it does not affect it when i look at the desktop image? Also on the mobile view too much gap above it and below it.

Is there anyway to get my mobile phone aspect correctly as i have tried a few css customizations so far and it’s just not working for me and the mobile view just won’t seem to work and i cannot see my top menu’s anymore as well? the first image you click on is the tablet view, the second is the desktop computer view and bottom one when you click on it is the mobile phone view.
thank you so much.

I figured it all out by reading back on some older posts and it worked…thank you still for everything that has been done to help others as a lot of it helped me already. I do have one lingering question i have not asked yet? There was a previous post not long ago about how to remove a title from each header page. It removed all of them except the one’s in my woo commerce shop menu as when i click my sub menus for SHOP…I still see it still has a title for my service in there and i want to remove those yellow titles in my sub menus just like all the other menu main titles up top have removed too. thank you…


I’m very happy that you got everything alright and got so far with the setup.

Can you please provide the shop page URL so I can locate the exact CSS page selector to handle the header?

You could just Right Click > Inspect Element and get the page class to add to the CSS that hides all the other headers.

Best regards the shop page really shows nothing at this point but its the 4 sub menu’s that need the yellow long words to disappear off the each sub menu page? is there some easy custom css that i can put in my custom css plugin in my page? that will rid each one or i will need 4 sets of info for each different sub menu? thank you so much. this one is the first sub menu that i want to clear all the yellow words out of my upper image page. if you need the other 3 let me know, but i think by giving you the link to the shop page itself you should be able to link up to the 4 sub pages to change.


Thank you for the more details, but I’m still having some difficulties to follow the issue, so you might want to provide some screenshots of what you want to acchieve.

For now, try this CSS code:

.single .bottom-header{
display: none;

Let me know how much this gets you forward.


That totally solved it with the last set of Css you gave me and now finally with that change my image needs to show normally on all my sub menus on my shop page…here is a image now which cropped the head part of my statue photo now…thank you so much for all your help you provide for everyone.


Can you please send me the exact link to the screenshot?
I cannot get the picture to crop the head off, I see it alright.

Browser/System info would be appreciated.