- This topic has 4 replies, 2 voices, and was last updated 8 years, 9 months ago by
.
-
Posts
-
Hello, I’m changing my page using Epik theme, so far I have this http://www.pepandblog.es
Cute? Not so much if you try to read it in an iPhone. The logo appears cut. I don’t know what do I have to change. I have tried to use the responsive header plugin but I think that my image should be small enough to be viewed in an iPhone. It is 360px wide.
Can someone please light my way? I’m totally lost in here!!Thanks!!!!
Some people add a smaller version of their logo to only show when viewed on mobile devices. So if you’re interested in doing this, all you would have to do is add a smaller version and place it in your images folder……then link to it in your css in the responsive section.
You could also add background-size to your site-header/title class in your responsive section as well. Sometimes it works, sometimes it seems to stretch the image and distort it a bit…..but it may work for you since you only need it for when the iPhone is in portrait mode. It looks fine in Landscape.
I assume you already know how to do the above, but if you need any assistance with any of it just let me know.
Your site looks awesome by the way! Are you interested in adding this to the Showcase when I have it ready?
I think it should be placed inside the @media only screen and (max-width: 767px) section targeting .header-image .site-title a but I really don’t know what should I put in here. Maybe background-image property?
I have uploaded an image into images folder called cabecera320.png but don’t know how to use it!!!
Of course I would love to be added to your showcase but I need to finish all the work in here. Thanks for your help!! I really appreciate it.I have added .header-image .title-area a { background: red;} just to try and it shows in my iPhone but I can still see the original logo underneath, why?
You’re actually supposed to add an image to the .site-header since thats where the background logo is using to show up. If you can upload it in the way I suggested above, I can take a look and tell you what you’ll need to change/adjust to get it working perfectly.
Remember, you can also use “background-size: 80% !important” to your “.site-header” as well. It would shrink it a little.
- You must be logged in to reply to this topic.