Hello
I have been using a lot of previous css code as per the support forums.
I have finally got my website to what I wanted on desktop. When I click the responsive button on the theme settings of vantage, it does not look good in Mobile.
Is there any way I can make my website more mobile friendly with the current design? Otherwise is it possible to make a mobile version of the site with less graphics and writing?
www.teasamples.co.nz
Cheers,
Erwin
Hi Erwin
Thanks for reaching out.
Your site is loading as I’d expect on mobile. Horizontally positioned elements stack vertically. This is the most common responsive setup you’ll see around the web. If you’d like to render a desktop like version of your site and mobile and let users zoom, we have a setting at Appearance > Theme Settings > Navigation > Responsive Layout.
It’s unfortunately not possible to easily hide certain elements for mobile or swap out content.
Hi Andrew
Thanks for getting back to me.
I was told that google would lower my ranking if I did not use a mobile version of the site.
Is there any way I can make the buttons, “Treat yourself” and “Treat a friend” become buttons under my picture when it goes to mobile?
Regards,
Erwin
For sure.
Yes, that’s correct, from sometime in April it’ll be best to run a mobile optimised site.
Those buttons will work on tablets and phone landscape, if you add the following to Appearance > Custom CSS we can try hiding them for regular mobile, that’s unfortunately all we can really do right now. Ideally the font size there would adjust, you could perhaps ask Meta Slider if they have any better ideas there. Your Pro purchase comes with premium support from their side.
/* Meta Slider */ @media (max-width: 480px) { #main-slider .button_example { display: none; } }If you’d like help with hiding anything on mobile, please let us know.
Hi Andrew
Ok thanks, I guess I will just remove it when the screen size gets smaller like you suggest.
One more thing if you could please. Google mobile site checker say the sites “content wider than screen”.
When I load in on my mobile everything fits on my screen, but I can still scroll to the right which is just blank background. I am guessing this is why it is causing a problem with google.
Do you know what is causing this, and how to get rid of it?
Thanks in advance,
Erwin
Sure, in your Custom CSS you’ve said:
.widget img { padding-right: 530px; }That’s causing a scroll bar on desktop and mobile.
Hope that helps.
Hi Andrew
Google ” Awesome! This page is mobile-friendly.”
Thank you so much!
Regards,
Erwin
Super, glad we could help.
All the best :)