Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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?
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.
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.
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.
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?
If you're working on header padding for desktop, take a look at the padding setting at Appearance > Customize > Theme Design > General > Header
Padding.
Sorry, I meant for the mobile version
Sure. Try the following at Appearance > Custom CSS:
@media (max-with: 680px) { #masthead .hgroup { padding-bottom: 0; margin-bottom: -24px; } }That worked, thanks a lot! I had to change “max-with” to “max-width” but otherwise it was perfect.
My bad! Thanks for picking that up. Glad it helped.
All the best :)