Mobile responsive logo issue

Tagged: epik, logo, responsive

This topic has 7 replies, 3 voices, and was last updated 9 years, 10 months ago by Wes.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 25, 2014 at 6:52 am #12420
Leanne
Customer
Hi, I have a commercial website jonmorrison.com.au using the Epik theme. I made the logo to the suggested size of 360px x 164px. Looks great, until I view it in landscape format on the ipad, or mobile phone, then it cuts off the right hand side of the logo (and the navigation menu takes over). I have searched the forums but cannot seem to find the answer.

If I use the iphone in portrait format it cuts off the right hand side of the logo as well (the nav drops underneath which is fine). If I use the ipad in portrait format the logo shows ok but is stuck to the right and not the centre.

I have tried using the genesis-responsive-header plugin but that has not made a difference either.

I would appreciate your assistance please – no doubt there is an easy answer 🙂 I am not great at coding, so if you are sending me any code could you please give me “dumbo” instructions.

Many thanks
Leanne
May 25, 2014 at 11:36 pm #12433
Eric
Customer
Do you have a link to your site so I can see what’s going on?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
May 25, 2014 at 11:56 pm #12438
Leanne
Customer
Hi yes you probably missed the website address in the first line of my big spiel – its jonmorrison.com.au

Many thanks in advance,
Leanne
May 26, 2014 at 9:28 pm #12443
Wes
Moderator
@leannemorrison Add this code to your Responsive section (bottom) in your css file –
```
.header-image .site-title a {
    background-size: contain !important;
}
```
I would add it in the iPhone responsive section, it should be the very last one.
June 10, 2014 at 5:34 am #12602
Leanne
Customer
Hi Wes, I’ve tried adding in the css below – at the end of the style.css file in the following places, but nothing seems to make any difference. I would appreciate any help you can give me as we have a potential client looking at our website later in the week and this could be a killer for us. I’m not very good at the coding, so if you could please be very specific about placement (before this and after that) I would be very grateful.

Thanks
Leanne

FIRST ATTEMPT
@media only screen and (max-width: 480px) {

.site-header {
width: 100%;
}

.content .portfolio {
text-align: center;
width: 100%;
}

.content .portfolio .post-image {
width: 100%;
}

.content .portfolio .more-link {
margin: 20px auto 0;
padding: 6px;
width: 60%;
}
.site-title a {
background-size: contain !important; }

}

___________________________________________________________________________________________________

SECOND ATTEMPT
Also in the iphone section
.plan-col,
.plan-col-popular {
float: none;
margin: 0 auto 40px;
width: 80%;
}
.site-title a {
background-size: contain !important; }

}
June 11, 2014 at 11:45 am #12614
Wes
Moderator
Just add the above code right under the 480 media query section near the bottom of your css like this –
```
@media only screen and (max-width: 480px) {

	.header-image .site-title a {
		background-size: contain !important;
	}
```
When I add the code it shows up like this –
June 14, 2014 at 12:32 am #12661
Leanne
Customer
Awesome thank you that fixed it perfectly. Thanks for the clear and precise instructions ( I really needed them!).
Cheers
Leanne

PS love the theme and have had MANY positive comments on it
June 14, 2014 at 9:38 am #12670
Wes
Moderator
Thanks! That’s good to hear! Glad everything is working.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Mobile responsive logo issue’ is closed to new replies.