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.

Mobile logo issues

Resolved 9 replies premiumthemetheme-vantage
T R
10 years ago · Last reply by Andrew Misplon 10 years ago

My logo on the mobile site is distorted, and I can’t figure out how to fix it. It happened as a result of me downloading the Simple Custom CSS plug-in and putting in code from a thread on this site. I deactivated and deleted that plug-in, but the logo is still distorted. How can I make it back to normal?

URL: http://www.durashieldabi.com

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

Need fast email support? Get SiteOrigin Premium

Replies

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

    Hi T R

    Thanks for reaching out.

    The problem CSS rule has been inserted at the bottom of your style.css file.

    #masthead .hgroup .logo img  {
width:679px!important;
height:300px!important;
}

    Try removing it.

    Please remember that all theme files are overwritten during theme updates. Appearance > Custom CSS is the easiest location to insert Custom CSS snippets.

    Hope that helps.

  2. T R 10 years, 7 months ago

    Thanks for your quick feedback. I added that to make the desktop version of my logo the size I wanted without losing resolution. I just deleted that part, and now the desktop logo is too big and the mobile logo was unchanged.

  3. Andrew Misplon Staff 10 years, 7 months ago

    For sure :)

    That change wouldn’t have survived a Vantage update. Appearance > Custom CSS is where it needs to go.

    Try adding the following to Custom CSS:

    #masthead .hgroup .logo img {
  max-width: 679px;
  height: auto;
}

    Should do the trick.

  4. T R 10 years, 7 months ago

    Great! The mobile version is back to the correct size. Now how can I bring the menu bar closer to the bottom of the logo?

  5. Andrew Misplon Staff 10 years, 7 months ago

    If you're working on header padding for desktop, take a look at the padding setting at Appearance > Customize > Theme Design > General > Header
    Padding.

  6. T R 10 years, 7 months ago

    Sorry, I meant for the mobile version

  7. Andrew Misplon Staff 10 years, 7 months ago

    Sure. Try the following at Appearance > Custom CSS:

    @media (max-with: 680px) {
	#masthead .hgroup {
	  padding-bottom: 0;
	  margin-bottom: -24px;
	}	
}
  8. T R 10 years, 7 months ago

    That worked, thanks a lot! I had to change “max-with” to “max-width” but otherwise it was perfect.

  9. Andrew Misplon Staff 10 years, 7 months ago

    My bad! Thanks for picking that up. Glad it helped.

    All the best :)

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