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.

Responsive Issues

9 years ago · Last reply by Andrew Misplon 9 years ago

Hello, I’m updating a website for a friend and she is using the Vantage Premium Theme. Her website is set to be responsive. When the website is on a mobile device there is a lot of white space in the header and I can’t work out why, could someone please explain? I have attached screenshots of the desktop site and the mobile site so you can see the difference.

Thank you

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

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 9 years, 8 months ago

    Hi Laura

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  2. Jose Antonio Beltran 9 years, 8 months ago

    hi i am having the same issue with making my website look responsive for mobile devices even after selecting th options on settings

    my website is http://www.livingworditd.com

    • Andrew Misplon Staff 9 years, 8 months ago

      Hi Jose

      We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.

      Page: New Thread

      If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.

  3. lauratyley 9 years, 8 months ago

    Hi Andrew,

    The website is italycountrystay.com

    Thank you

    Laura

  4. Andrew Misplon Staff 9 years, 8 months ago

    Thanks Laura

    Please, can you try re-creating your header?

    header-steps-to-winning

    I left out that the site title font can be set from AppearanceCustomizeTheme DesignFonts.

    Finally, you can set the site title font size from Appearance > Custom CSS with the following:

    /* Site Title */
    #masthead .hgroup h1 {
        font-weight: 100;
        font-size: 36px;
    }

    Edit the above snippet as required.

  5. lauratyley 9 years, 8 months ago

    Amazing Andrew, thank you so much.

    The issue I have now is getting the language widget and the site title to render together, they don't seem to know that the other exists now that they are not both widgets.
    Ideally I want the language options to sit above the title at the very top of the header. Do you know what CSS I would need to use to do this?

    Thank you

    Laura

  6. Andrew Misplon Staff 9 years, 8 months ago

    Sure.

    I don’t think the rule you have in Custom CSS is doing anything. Try removing it and adding:

    #masthead .hgroup h1 {
        max-width: 74%;
        margin: 0 auto;
    }

    Adjust as required.

  7. lauratyley 9 years, 8 months ago

    Andre you've been such a great help.
    I have another issue with the site with regards to reponsiveness.
    The gallery when on mobile just reduces in size, is it possible to make the images pile on top of each other?
    http://www.italycountrystay.com/en/photo-gallery/

    Thank you

    Laura

  8. Andrew Misplon Staff 9 years, 8 months ago

    Sure, try the following at AppearanceCustom CSS:

    /* Gallery */
    @media (max-width: 680px) {
    	.gallery-item {
    		width: 100% !important;
    	}
    }

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