Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,289

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…

Offline

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

trenc
Plugin Author
From: Amsterdam
Registered: 2008-02-27
Posts: 571
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)

Offline

#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...
}

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,289

Re: css: gap in mobile view layout

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

Offline

Board footer

Powered by FluxBB