Homepage › Community Forums › Epik Theme Support › Site Not Sized Correctly For Mobile
Tagged: Mobile Site Not Correct Size
In looking at the http://www.PowerLawMarketing.com site on mobile everthing is left – leaving black space on the right side and almost cutting off the logo.
I have another site that is fine – http://www.promostuff4u.com
Can’t seem to find a setting(s) that is different between the two sites.
Any help is appreciated.
Hi Tim,
Both the example sites look identical on my Iphone. No black spaces on side. What site are you working on, or do you have this happening to yours?
Working on both – as they are both our sites. on my iphone 4S – the image above is what I get – and had my daughter check on her iphone 5S and was the same.
I did see the logo image (Power Law) does not “fit” on the small screen size (does not reduce fully) and tried this:
.header-image .site-title a {
background-size: contain !important;
}
This has worked for me, but something isn’t working for yours. Hummmm, still looking…
Ok will try that Andy – Thanks, just strange that the other site is ok. I have double checked the size of the logo – deleted it and reuploaded. Also the black on the side is an issue.
Ok I deleted your entire style.css and replaced it with a clean original Epik style.css.
The site worked perfectly, and the logo properly sizes down. So that tells me that somewhere in your .css you made a change or left something out which is affecting the website.
You might compare line by line and see what is causing the problem.
.css change line 2047 to “100%” you have it set at “360px” causing problem
add this:
.header-image .site-title a {
background-size: contain !important;
and the logo will properly size on small screens
let me know if this worked!!
Sorry but it took a bit to find this.
OMG – you are awesome – can I buy you a coffee? Thank you, Thank you.
Andy is there a way to view the line numbers – I am not seeing how and 360px is listed three times in the .css
Ok.
At the bottom of the style.css just add this:
.header-image .site-title a {
background-size: contain !important;
That is the code to “shrink” your image to “contain” it on small screens.
The “360” part is here:
/* Logo, hide text */
.header-image .site-header .wrap {
padding: 0;
}
.header-image .site-title a {
float: left;
height: 164px;
width: 100%;
}
.header-image .site-title a {
background-size: contain !important;
}
/* Widget Area
--------------------------------------------- */
This above section “header image site title a” is what you are looking for.
In seeing your site, it works and you appear to have these in place. Clear your cache, and open up the browser again and it should work for you.
On your website, right click, and a dialog box pops up. At the bottom is “inspect element”. Click that and you can see what is going on with a website. I prefer Firefox for this, but it also works in Chrome. The css shows up in the “inspection” windows, and you can change the code, colors, anything. The changes you make will vanish if you go to a different page or reload the window. This is a great way to “test” something (either finding a problem or trying a new color, or spacing, etc.). The changes do not affect the “real” website.
I just went to a different browser and loaded your website…it’s perfect. Your cache?
That did the trick – THANK YOU!