Textpattern CMS

#1 2015-04-22 13:40:58

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

css: gap in mobile view layout

hi,

in mobile view, there is a little gap in right-side of layout.
take a look (tap and move right to left).
can anybody tell me, where it comes from? i just don’t get it…
tried to eliminate div by div (display:none), but nothing changed…

#2 2015-04-22 13:53:42

trenc

Plugin Author

From: ⛵️, currently Göteborg, SE

Registered: 2008-02-27

Posts: 574

Website GitHub

Re: css: gap in mobile view layout

Short shot:

Try

@media screen and (max-width: 620px) {
	#container-left {
		 overflow-x: hidden
		}
}

Btw. Really nice site!

Last edited by trenc (2015-04-22 13:55:21)

---

Digital nomad, sailing the world on a sailboat: 32fthome.com

#3 2015-04-22 14:16:03

philwareham

Core designer

From: Haslemere, Surrey, UK

Registered: 2009-06-11

Posts: 3,564

Website GitHub Mastodon

Re: css: gap in mobile view layout

trenc wrote #290169:

Short shot

It would be better to find the offending content spillage and deal with it properly, instead of using overflow rules. You should be able to pick the layers apart using your browser’s dev tools.

In this case, it’s your .container rule that is the problem. You have indicated a width of 100% plus you have adding padding left and right of 10px – that gives you a width of 100% + 20px which is causing your spillage.

Either add box-sizing: border-box; to your container rule or (my preferred way) use percentages for padding, i.e.:

.container {
    width: 92%;
    padding: 0 4%;
   ...etc...
}

#4 2015-04-23 07:20:56

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: css: gap in mobile view layout

added box-sizing: border-box;
brilliant! thank’s guys!