Mobile scroll on front page

[Sylvakin]

Hi guys,

My goal was to have a static front page with our logo and quick navigation links. I’ve managed to do that thanks to a custom header, no content and no footer, and it seems to work ok on large screens and iPads. However, on mobile the image is too big and we have to scroll to arrive on the logo. Is there a way to load it directly on the logo on mobile?
Should I make a custom page instead of a header? What do you advice for a static front page with a photo background?
The website is : https://www.ablissfuldawn.com/

Thanks a lot!

[tristup]

Hi Sylvakin,

Thanks for reaching out.
It seems that you have disable the Retina option in the Image element and that is why it loads the image with the Fullwidth. If that is required in your Desktop version, I would suggest you create another Bar by duplicating the current one and make that visible only on Mobile devices by using the Customize > Hide During BreakPoints option, and also enable the Retina option for the image.

Please make sure that the current Bar is visible only on the other breakpoints and that can be done through the Hide During Breakpoint options.

Hope it helps.
Thanks

[Sylvakin]

Thank you! The logo is not exactly the issue. I’m under the impression that the problem is mainly because the image in the background is too big, and the page wants us to be able to see it in its entirety. But actually, I wouldn’t mind if the image was cropped to the right size, and the logo was always centered.

Thank you! The logo is not exactly the issue. I’m under the impression that the problem is mainly because the image in the background is too big, and the page wants us to be able to see it in its entirety. But actually, I wouldn’t mind if the image was cropped to the right size, and the logo was always centered.

Did you by any chance change anything when you looked into the problem? Before the logo was always scaled with other screen sizes, but now it’s always huge and cut on the side.
It looks like everything isn’t centered anymore since you intervened. See image attached. It’s like there is a margin somewhere that I cannot find, and the logo isn’t responsive anymore.

Thanks again !

[tristup]

Hi Sylvakin,

First of all, we didn’t make any changes as we don’t have any access to your WordPress admin. The screenshot is given in my last post is from my local environment, where I used your logo by downloading it from the website.

I investigated your website using the Browser Debugger tool and found that the width* of the Bar increased due to the width of the Logo as background depends on its content. If you enable the Retina option, you can find the background width decreased as the Logo width decreased.

Thanks

[Sylvakin]

Hi, thank you for your reply! I’m not sure I understand what to change in order to not have a mobile version that is not cut. With Retina on and off, the result is the same, and it used to work fine – I’m a bit confused about what I changed to get to this result, presumably by turning on retina on the first time…? But I could be wrong.
It used to be well centered, and now it looks off to the right.
Any help would be greatly appreciated! Have a nice afternoon.

[marc_a]

Hi @Sylvakin,

Would you mind sharing your admin credential so that we can check your setup properly? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[Sylvakin]

Hi, thanks for getting back to me! I added the admin credentials in the secure note.

[marc_a]

Hi @Sylvakin,

I suspect that this is just a cache issue on your end because when I tried to purge the cache in your performance plugin it is now centering properly on the front-end. Regarding the image, it is occupying the whole container because the image is too big, if you want to have spacing on the left and on the right, you can add padding to your image.

Hope that helps.

Thank you.

[Sylvakin]

Hi, thank you! Is the image in the secure note your own screenshot? If so, you’ll notice that it is not centered, The gap on the right is shorter than the gap on the left of the buttons.
It was working just fine two days ago, the logo was centered, and the buttons too. I didn’t change the size of the logo.
Thank you.

[prakash_s]

Hello @Sylvakin,

I checked your site it seems that the style is rendering from the cache. I went ahead and clear the cache after that I checked your site on my phone it seems that it is working fine at the moment. I would suggest you clear your browser cache and then check it again.

Thanks

[Sylvakin]

Thank you very much! Have a nice day

[prakash_s]

Hello @Sylvakin

Glad that we were able to help. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Have a great day!
Thanks

[Sylvakin]

Hi again, sorry to come back here – I’ve waited and cleared my cache, tried on private navigation, and asked friends who never went on the website (so no cache), and the issue is still here… The image is not centered like on your screenshot, but off to the right like on mine. Do you have an idea on how to fix this? Thanks!!

[marc_a]

Hi @Sylvakin,

We’re not quite sure what’s happening on your end but I double check your Mobile Header settings again and I found out that the issue is with the content settings in the Mobile Bar, you set it to auto which should be set to 100% to have a proper center alignment. I also adjust the outer space so that it will have decent padding. I went ahead and change it for you.

Hope that helps.

Thank you.

[Sylvakin]

It works!! Thank youuuu very much. Your changes weren’t saved apparently, but I was able to replicate it from your screenshot in the secure note. Thanks again!

[marc_a]

Hi @Sylvakin,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.