Home>Support>Mobile logo issues

Mobile logo issues

By T R, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 2 months ago T R

    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. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 2 months ago T R

    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. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 2 months ago T R

    Sorry, I meant for the mobile version

  7. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure. Try the following at Appearance > Custom CSS:

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

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

  9. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More