Responsive Logo Image
Permalink
Hoping someone can help me out here - Im stuck on this one! and hoping someone will take a moment to have a look and see if they can offer some help.
Im using a pretty simple theme - Gratitude - (for a very simple website). Its all working well except for one small issue - I cant seem to get the logo to be responsive. Ive put it in a content block (as I seem to be able to control it better than in an image block), and the image on the page is a background image with a full width css.
The website is herehttp://elitemobilewheelrepairs.com.au...
Im using a pretty simple theme - Gratitude - (for a very simple website). Its all working well except for one small issue - I cant seem to get the logo to be responsive. Ive put it in a content block (as I seem to be able to control it better than in an image block), and the image on the page is a background image with a full width css.
The website is herehttp://elitemobilewheelrepairs.com.au...
I saw you have applied few css rules to the logo image. Add the below along with them.
Thanks for the reply!
The theme called for the block to have full-width applied to to it. This appears to manage the background image.
I added in the code you suggested below, to the additional css field (is this the correct place?). It does not seem to have changed anything.
The theme called for the block to have full-width applied to to it. This appears to manage the background image.
I added in the code you suggested below, to the additional css field (is this the correct place?). It does not seem to have changed anything.
The logo image does not resize when I narrow down he page size - it just gets chopped off.
This also appears to be affecting the layout on a mobile.
This also appears to be affecting the layout on a mobile.
You added it in wrong place, Add the css to image itself not the div.
float: left;
margin-bottom: 60px;
margin-top: 60px;
max-width: 100%;
height: auto;
float: left;
margin-bottom: 60px;
margin-top: 60px;
max-width: 100%;
height: auto;
Perfect! Thank you so much for taking the time to help me out on this. I knew it was simple and was staring me right in the face :)
I know you ave already offered your time to help me with this, but I was wondering if there is an easy way to make the background images also responsive??
You can use this: background-size: 100%;
Though it won't look good as height also will be reduced as per screen resolution.
Though it won't look good as height also will be reduced as per screen resolution.
Thanks! Your are right, in that while it works, the height is compromised and it doesn't work at all on a mobile
@Meje
Your search engine ranking is going to be hurt by all the meta keywords you are using (keyword stuffing).
Irrelevant keywords
"Blocks of text listing cities and states a webpage is trying to rank for"
https://support.google.com/webmasters/answer/66358?hl=en...
Your search engine ranking is going to be hurt by all the meta keywords you are using (keyword stuffing).
Irrelevant keywords
"Blocks of text listing cities and states a webpage is trying to rank for"
https://support.google.com/webmasters/answer/66358?hl=en...
Oh thank you! Definitely don't want that!
