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.

Vantage masthead size on mobile screen

Open 11 replies premiumthemetheme-vantage
AndrewGozza
10 years ago · Last reply by Andrew Misplon 10 years ago

Hi,
This is my first WordPress website, so please excuse my ignorance.
When the page is resized on a small screen (I’m testing on an iPhone 4s), my header/masthead logo “overlaps”
my menu button (I’ve used the “Responsive Menu” plugin, rightly or wrongly, because it gives me the options I want). If I resize the window on my desktop, the logo stays aligned to the left UNTIL a certain point, then “centres” itself. Strangely, the horizontal height of the header also increases.

Is the CSS I can inject to keep the logo LEFT aligned even on a vey small screen?
The site I’m working on is: www.oceanshoresadventist.org.au
Thanks in advance for any advice!

URL: http://www.oceanshoresadventist.org.au

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

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Andrew Misplon Staff 10 years, 11 months ago

    Hi AndrewGozza

    Thanks for reaching out. Did you manage to resolve. All looks good on my side, testing in iOS Chrome.

  2. AndrewGozza 10 years, 11 months ago

    Thanks Andrew, It is sort of fixed…. I re-did the logo with blank space to the right of the logo, so that the logo always “looks” aligned left. The logo now does not obscure the menu button on a small screen (<640px).
    Is there any code to center the logo vertically?

  3. Andrew Misplon Staff 10 years, 11 months ago

    Perhaps try the following, see if that helps at all:

    /* Header */
@media (max-width: 680px) {
header#masthead .hgroup {
  padding-bottom: 0;
}
body.responsive header#masthead .hgroup .logo {
  padding-top: 13px;
}
}

    Insert under Appearance > Custom CSS.

  4. AndrewGozza 10 years, 10 months ago

    Thanks for the CSS you suggested: Worked well UNTIL the theme was upgraded today…
    Now the header DOUBLES in vertical height when the browser window is reduced to mobile screen width.
    Any ideas? (Have screen shots, but not sure if/how to upload them)

  5. Andrew Misplon Staff 10 years, 10 months ago

    Try changing our Custom CSS to the following:

    /* Header */
@media (max-width: 680px) {
	header#masthead .hgroup {
		padding-top: 0;
	  	padding-bottom: 0;
	}
	body.responsive header#masthead .hgroup .logo {
		padding-top: 13px;
	}
}
  6. AndrewGozza 10 years, 10 months ago

    Thanks for the CSS you suggested: Worked perfectly!

  7. Andrew Misplon Staff 10 years, 10 months ago

    Super, glad that did the trick :) All the best.

  8. AndrewGozza 10 years, 10 months ago

    Andrew,
    on the same issue, is there a way of making the logo in the header align “hard” LEFT? Currently, the logo position looks fine on iOS (small screen), but the logo is “centering” and overlapping in Windows Mobile.
    At the moment, the logo is left aligned, but left aligned with the content on the page content.
    IF the logo could be aligned left , it might fi my problem…

  9. Andrew Misplon Staff 10 years, 10 months ago

    Sure, you could try to switch out the CSS we used before with the following:

    /* Header */
@media (max-width: 680px) {
	header#masthead {
		padding-left: 0;
	}
	header#masthead .hgroup {
		padding-top: 0;
	  	padding-bottom: 0;
	}
	body.responsive header#masthead .hgroup .logo {
		padding-top: 13px;
	}
}

    Give that a try, let us know how it goes.

  10. AndrewGozza 10 years, 9 months ago

    Hi Andrew, That *sort of* helped… The header logo is a little more left now, but with “padding-left: 0” I would have thought that the logo would move to the left side of the screen, and I’d have to add padding to make it look nice…

  11. Andrew Misplon Staff 10 years, 9 months ago

    Looks solid on my side. Let me know if you’d like to make further changes.

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