Site Not Sized Correctly For Mobile

Tagged: Mobile Site Not Correct Size

This topic has 12 replies, 2 voices, and was last updated 8 years, 5 months ago by tim.

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

Author

Posts
November 17, 2015 at 7:57 am #16684
tim
Customer
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.
November 17, 2015 at 12:37 pm #16685
Andykev
Customer
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?
November 17, 2015 at 12:40 pm #16686
tim
Customer
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.
November 17, 2015 at 12:58 pm #16687
Andykev
Customer
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…
November 17, 2015 at 1:03 pm #16688
tim
Customer
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.
November 17, 2015 at 1:27 pm #16689
Andykev
Customer
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.
November 17, 2015 at 1:32 pm #16690
Andykev
Customer
.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.
November 17, 2015 at 2:24 pm #16691
tim
Customer
OMG – you are awesome – can I buy you a coffee? Thank you, Thank you.
November 17, 2015 at 5:41 pm #16692
tim
Customer
Andy is there a way to view the line numbers – I am not seeing how and 360px is listed three times in the .css
November 17, 2015 at 9:18 pm #16693
tim
Customer
Sorry to be a pain Andy – made both the changes you suggested – it’s close the page now is the right size (no black space on the right) – but the logo is cut off – see below. In looking at my other site the teal squiggle in the Bizarre Marketing logo is cut off also – didn’t notice before.
November 17, 2015 at 9:46 pm #16694
Andykev
Customer
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.
November 17, 2015 at 9:50 pm #16695
Andykev
Customer
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?
November 18, 2015 at 5:42 am #16696
tim
Customer
That did the trick – THANK YOU!
Author

Posts

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

The topic ‘Site Not Sized Correctly For Mobile’ is closed to new replies.