Hello,
I bought premium theme today and I would appreciate your support in following please. I am making my site www.gingyland.com mobile responsive.
1. Header – I want to remove extra padding from my header.
2. Banner image – Presently my banner image is thinner than menu in mobile website. What size should I use for banner image so that it comes as good as it in your demo?
3. There is are two images apple and android in center of homepage. In mobile view, they become left aligned. How can they be center aligned or both images come beside each other?
4. There seems to be lot of padding in footer in desktop and mobile view both. How can I reduce it?
5. The LinkedIn icon coming in footer is again left aligned but is right aligned in website.
Thanks
Need help for making site responsive
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Anupam
Thanks for reaching out.
1. Appearance > Custom CSS insert:
/* Header */ @media (max-width: 680px) { body.responsive #masthead .hgroup { padding-top: 45px; padding-bottom: 45px; } }Adjust as required.
Normal desktop header padding can be set from Appearance > Customize > Theme Design > General.
2. Your slider isn’t as high as the demo which is 420. Try our tutorial on this here: https://siteorigin.com/vantage-documentation/getting-started/slider/
3. Insert at Appearance > Custom CSS:
/* Home */ .so-widget-sow-image img { margin: 0 auto; }4. Appearance > Custom CSS:
/* Footer */ #colophon { padding: 30px; }Adjust as required.
5. 3 will fix this.
Thanks, let me try these. Just wanted to add another issue.
6. My header image and text are coming fine when in desktop. The article title is smaller than it. But when I check mobile, header text becomes smaller than article title and it doesnt look nice. Anyway to correct this?
Thanks again.
Sure.
By header image, are you referring to your logo? Can you clarify what you’re looking at for article title? Are you asking about titles like “PrepOptimizer Android App” here: http://www.gingyland.com/prepoptimizer-android-app
Yes Andrew. Prep optimiser comes bigger than header in mobile but is fine in web.
Sure. Try:
/* Post Title */ @media (max-width: 680px) { article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { font-size: 15px; } }Adjust as required.
All of them worked. Thanks for the fantabulous support :)
For sure :) Glad we could help.
All the best.
2 more requests please –
7. How can I reduce diameter of the circle icons in web and mobile?
8. Can footer padding and space in between footer contents be reduced in mobile as well?
Thanks
Oh my list is increasing
9. I reduced padding from header in web and mobile as suggested by you. How can I actually increase size of header image and text since it appears to be reduced in mobile.
For sure :) We don’t officially offer customisation on this level. We do our best with small snippets. Just a heads up :)
Reference: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
7. Starting to get tricky now. A bit more than we can assist with. I’ll log this as a feature request. Codeable.io if you’d like to get outside help.
8. Can you perhaps try the the following. In the footer widget area remove the Layout Builder. You have five items in the footer, try inserting five SiteOrigin Editor or Visual Editor widgets. I can assist with mobile adjustments after that. It’ll hugely simplify the markup we have to work with.
9. No easy answer here. The image fits the container. You can look at decreasing left, right padding to give the image more space:
@media (max-width: 680px) { #masthead { padding: 0 35px 0 35px; } }Adjust as required.
Thanks for the support. The Chrome tool was really helpful. I was able to make changes and some more as well. I was able to fix footer, but not able to center align the contents when float left is there. Is it technically possible?
Super :) Really glad to hear you’re making progress. Could you send a little more info on the last challenge. When should the footer contents be center aligned? Sorry, lost you there.
Thanks
What I meant was, when footer wraps on device, its content are with float left and they all come as left aligned. Is there any way they can be center aligned?
Also regarding my banner image in home page, iit is size 1600*480. But when it gets displayed in slider it becomes 1080*324 px. And it comes as smaller image visible very clearly in device. I replaced and checed with few other large images and all get truncated. Can you advice why they are getting truncated?
Thanks
Thanks.
Remove the following from Custom CSS:
@media (max-width: 680px) { body.responsive #footer-widgets .widget { float:left; align-items:center; } }Instead, insert:
@media (max-width: 680px) { body.responsive #footer-widgets .widget { float: none; text-align: center; } .ow-button-base.ow-button-align-right { text-align: center; } }That should fix the footer.
Are you asking about your logo? I see you changed that. Nicely done. Looking good now.
The logo is restricted to 1010px on upload.
Thanks. I was able to reduce diameter of circle icons too :)
I was talking about image that comes in slider below menu. The big black image.
Meta Slider handles that responsive behaviour. The slider can’t be wider than 1080px because that’s the site width. The image then scales down proportionally to maintain its aspect ratio. Hope that helps explain what’s going on there.
What about height, why is it truncating that to 320 something. Because of it my slider comes smaller than whats shown in vantage theme demo. :(
The demo starts out at a greater height of 420px.
Have you tried using the exact settings from this page?
https://siteorigin.com/vantage-documentation/getting-started/slider/
Use 1080 as your width and 420 as your height in Meta Slider settings.
Okay I deleted everything restarted , exact same settings. Can you please check. Sizes are now coming fine. Is it getting displayed as per vantage demo?
Looking good :)