Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I set up our company logo as the master head background. It responds right on all browsers on the computers, however, when viewing the site on mobile devices it does not respond right. It duplicates up and down, it doesn’t center right and at time populates the entire header.
Any ideas on how to fix this?
Hi Mdfilho
Thanks for reaching out.
At Appearance > Theme Settings > Page > Masthead Background Image there is a Layout setting. If you set that to Center it will prevent the repeating. There are however other things going on here so let me try fix with Custom CSS.
Insert the following at Appearance > Custom CSS:
/* Masthead */ #masthead { background-repeat: no-repeat; background-size: cover; } /* Vantage Header Responsive Breakpoint */ @media (max-width: 825px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }And ideally re-make and upload your masthead background image so that it’s 1080px wide.
Andrew, I most be doing something wrong following your instructions because I follow Appearance > Theme Settings and there I can’t find neither Page nor Masthead Background Image in the layout settings.
I have there:
Responsive Layout with Enabled checked
Enable FitVids.js with Enabled checked
Layout Bound set to Boxed
Masthead Layout set to Default Masthead
Masthead Menu set to Default Menu
Footer Layout set to Default Footer
I did however, went to Appearance > Background > Theme Design > Page and found Master Head Background there. There it is also where I have Masthead Background Image Layout with the image and the settings you mentioned. It was set to Tile because if I set it to Center it will not center. The image will collapse on the header and appear half way down on all devices including computers. Tile and Default seems to work on all computers, but it goes out of place on phones and tablets.
If I insert the Custom CSS you indicated, then the image goes out of places on everything, computers, tablets and phones regardless on what I have the image set under (Tile, Center, Default…). Also it doesn’t work either no matter if I use the 1120px wide images or if I use the 1080px images. Matter fact if I use the 1080px images it duplicates all over on all devices and computers as well.
Any other suggestion or am I doing something wrong? Would you like for me to send you the WP Dashboard credentials so you can go in there and see what am I doing wrong? If yes how can I securely send it to you? I don’t every one on this board to know the credentials though…
Thanks!
Andrew, I most be doing something wrong following your instructions because I follow Appearance > Theme Settings and there I can't find neither Page nor Masthead Background Image in the layout settings.
I have there:
Responsive Layout with Enabled checked
Enable FitVids.js with Enabled checked
Layout Bound set to Boxed
Masthead Layout set to Default Masthead
Masthead Menu set to Default Menu
Footer Layout set to Default Footer
I did however, went to Appearance > Background > Theme Design > Page and found Master Head Background there. There it is also where I have Masthead Background Image Layout with the image and the settings you mentioned. It was set to Tile because if I set it to Center it will not center. The image will collapse on the header and appear half way down on all devices including computers. Tile and Default seems to work on all computers, but it goes out of place on phones and tablets.
If I insert the Custom CSS you indicated, then the image goes out of places on everything, computers, tablets and phones regardless on what I have the image set under (Tile, Center, Default…). Also it doesn't work either no matter if I use the 1120px wide images or if I use the 1080px images. Matter fact if I use the 1080px images it duplicates all over on all devices and computers as well.
Any other suggestion or am I doing something wrong? Would you like for me to send you the WP Dashboard credentials so you can go in there and see what am I doing wrong? If yes how can I securely send it to you? I don't every one on this board to know the credentials though…
Hi Mdfilho
I hope you do not mind me jumping in. The location Andrew meant to post was Appearance > Customize > Theme Settings > Page > Masthead Background Image. The rest of his instructions should work after that.
Hope this helps
Magus
Thanks Magus!
However, I am sorry to say, but it doesn’t work either. I found the settings you indicated and tried the instructions once again including combining center and all of the other settings with the Custom CSS and when it works on the computers it doesn’t work on the tablets and phones. Then when tweaking and changing the settings around making it work on the tablets and phones (making it work meaning, it doesn’t appear at all, which is ok with me for those devices), it does not align correctly on the computers. None of them, windows or mac using all, firefox, chrome, I.E. and safari.
Any other ideas?
Mauricio
Thanks Magus!
However, I am sorry to say, but it doesn't work either. I found the settings you indicated and tried the instructions once again including combining center and all of the other settings with the Custom CSS and when it works on the computers it doesn't work on the tablets and phones. Then when tweaking and changing the settings around making it work on the tablets and phones (making it work meaning, it doesn't appear at all, which is ok with me for those devices), it does not align correctly on the computers. None of them, windows or mac using all, firefox, chrome, I.E. and safari.
Any other ideas?
Hi Mdfilho
I see what the issue is. Please try this
#masthead { background-repeat: no-repeat !important; background-size: cover; } @media (max-width: 825px) { #masthead { background-image: none !important; } }This should work by hiding the image below the breakpoint. You should adjust the max-width figure to whatever the pixel width of your table is when viewed in portrait mode.
Let me know if this works for you
Magus
Thanks Magus!
Well, it didn't work at first, but then I change your code a little by tweaking the background-size: cover; to background-size: 1080px; and the @media (max-width: 825px) to match @media (max-width: 1080px). Then I changed back to Tile instead of Center on the Masthead Background Image settings and its working fine now on all devices and computers.
Weird ways to make codes work man…
Thanks for the help!
Thanks Magus!
Well, it didn’t work at first, but then I change your code a little by tweaking the background-size: cover; to background-size: 1080px; and the @media (max-width: 825px) to match @media (max-width: 1080px). Then I changed back to Tile instead of Center on the Masthead Background Image settings and its working fine now on all devices and computers.
Weird ways to make codes work man…
Thanks for the help!
Hi Mauricio,
That’s good to hear.
If you need any more help, please feel free to open a new support thread.
Magus