Thanks Tomas! I’m interested in now making the logo responsive. In order to get the site logo to appear in mobile view while not affecting the computer view (uncommenting just around Tip 14), I had to uncomment the following section of code. Can you tell me where to insert the lines
.site-logo-link {
width: 100%;
}
as instructed in your guide to the theme to have the width only affect the mobile view?
Below is the entire section I had to uncomment:
.site-logo-link {
display: none;
}
.site-logo {
}
.site-branding {
margin-top: 12px;
margin-top: 0.75rem;
}
.site-logo-link {
display: inline-block;
float: left;
margin: 5px 24px 0 0;
margin: 0.3125rem 1.5rem 0 0;
}
#site-title-wrapper {
padding: 12px 0 12px 12px;
padding: 0.75rem 0 0.75rem 0.75rem;
}
.site-header .site-title,
.site-header .site-title a {
clear: none;
display: inline;
}
.site-header .site-title,
.site-header .site-description {
text-align: left;
}
img.header-image,
.site-header img.wp-post-image {
margin-top: 24px;
margin-top: 1.5rem;
}
You can just post that code in your custom CSS plugin, should work.
Also if you want to have bigger logo, just upload bigger image.
Hi Tomas, unfortunately when I paste the following code into the my custom CSS plugin, the logo on the computer version of the site becomes centered and the mobile view remains left-justified and not full-width. Is there any way to make the mobile logo and site responsive while maintaining the left-justification of the logo in the computer view? Did I change something incorrectly in the style sheet that flipped the two views?
.site-logo-link {
width: 100%;
}
Hi Tomas,
Just making sure you got my last message. The logo is working in Mobile view when I uncomment the entire section of code noted in my second post above on the style sheet. However, the logo is not responsive in its mobile view — the site width seems to end at the left edge of the “Menu” dropdown in the upper right corner. Is there any way to make the Mobile logo responsive to fill the width of the screen but keep the computer logo left-justifed and the size it currently is?
Thank you for your help.
You could upload logo that is 960px wide.
Overall in order for me to at least try help you I need access to your site.
In any case the best thing is to use Firefox or Chrome code inspector, with its help you can see what rule affect the element.