This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Need help for making site responsive

Resolved 22 replies premiumthemetheme-vantage
Anupam Krish
10 years ago · Last reply by Andrew Misplon 10 years ago

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

URL: http://www.gingyland.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

22
  1. Andrew Misplon Staff 10 years, 5 months ago

    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.

  2. Anupam Krish 10 years, 5 months ago

    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.

  3. Andrew Misplon Staff 10 years, 5 months ago

    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

  4. Anupam Krish 10 years, 5 months ago

    Yes Andrew. Prep optimiser comes bigger than header in mobile but is fine in web.

  5. Andrew Misplon Staff 10 years, 5 months ago

    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.

  6. Anupam Krish 10 years, 5 months ago

    All of them worked. Thanks for the fantabulous support :)

  7. Andrew Misplon Staff 10 years, 5 months ago

    For sure :) Glad we could help.

    All the best.

  8. Anupam Krish 10 years, 5 months ago

    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

  9. Anupam Krish 10 years, 5 months ago

    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.

  10. Andrew Misplon Staff 10 years, 5 months ago

    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.

  11. Anupam Krish 10 years, 5 months ago

    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?

  12. Andrew Misplon Staff 10 years, 5 months ago

    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

  13. Anupam Krish 10 years, 5 months ago

    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

  14. Andrew Misplon Staff 10 years, 5 months ago

    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.

  15. Andrew Misplon Staff 10 years, 5 months ago

    Are you asking about your logo? I see you changed that. Nicely done. Looking good now.

    The logo is restricted to 1010px on upload.

  16. Anupam Krish 10 years, 5 months ago

    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.

  17. Andrew Misplon Staff 10 years, 5 months ago

    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.

  18. Anupam Krish 10 years, 5 months ago

    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. :(

  19. Andrew Misplon Staff 10 years, 5 months ago

    The demo starts out at a greater height of 420px.

  20. Andrew Misplon Staff 10 years, 5 months ago

    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.

  21. Anupam Krish 10 years, 5 months ago

    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?

  22. Andrew Misplon Staff 10 years, 5 months ago

    Looking good :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread