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.

Question about responsive masthead in Vantage theme

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

Hello,

I would like to ask you about a solution of one problem.
I have problem to make a responsive masthead in mobile phones.
In Custom CSS I have:

/* Full header logo */
header#masthead {
padding: 0 !important;
}
header#masthead hgroup {
padding: 0 !important;
}
header#masthead hgroup .logo img {
width: 1080px;
}
.main-navigation {
margin: 0 !important;
}
body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar {
display: none !important;
}

When I try to open a website in mobile phone it dosen’t work good.
If you can please, help mi to resolve this problem.

Best regards,

Martin

URL: http://www.geomap.katowice.pl/

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

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 2 months ago

    Hi Martin

    Try the following under Appearance > Custom CSS:

    header#masthead {
      background-size: 100%;
      background-repeat: no-repeat;
    }
    @media (max-width: 680px) {
    header#masthead .hgroup {
    padding-top: 95px;
    padding-bottom: 0;
    }
    }

    It’ll remove the header widget area below 680px, I think that works best. It can be done differently if required.

  2. M.B. Urbański 11 years, 1 month ago

    Hi Andrew,

    Thank you very much for an answer.
    It is working very good, but I have one more question in this topic.
    When I open the website on smartfon it's look like this (image below).
    My question is – it is possible to reduce distance between a masthead and menu?

    I would like to aks one more question. After last update to newest version of WordPress I have some problems with distanace of the box on the end of the site. If you can please write me where can I change the distance of the box to get it in the one line (grey and yellow).


    Thank you very much for your help.

    Best Regards,

    Martin

    2015-03-17 14:28 GMT+01:00 Andrew Misplon <
    forum+9282-u19173-e47205c9e8a3afdaa34f8dbdb283bfd203d977f0@siteorigin.com>:

  3. Andrew Misplon Staff 11 years, 1 month ago

    Hi Martin

    Sorry, the forum unfortunately can’t attach images from emails just yet.

    In the Custom CSS I sent, there is a 95px value. You could reduce that to 89px and it would cut 6px out from the masthead on mobile.

    Try adding the following to Appearance > Custom CSS to help out the background image:

    /* Background Image */
    body.custom-background {
      background-repeat: no-repeat;
      background-size: 100%;
    }

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