Mobile styles are off - can anyone help with good CSS?

Support
1

Hey there,

I don’t understand what I’m doing wrong here, can anyone help with good CSS?

I’m using the antimatter theme and am trying to make the column more narrow for big screens. Now it turns out that when I look at it from an actual mobile phone, the margins are completely off.

Thanks!

This is the page:

This is the CSS I was using to adjust the margins:

.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h2 .modular-row.center h4 {
	margin-left: 12rem;
	margin-right: 12rem;
	}

@media only screen and (min-width: 480px) {
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h2, .modular-row.center h4 {
	margin-left: 1rem;
	margin-right: 1rem;
    }
}
		
@media only screen and (min-width: 600px) {
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h2, .modular-row.center h4 {
		margin-left: 3rem;
		margin-right: 3rem;
		}
}

@media only screen and (min-width: 801px) {
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h4 {
		margin-left: 6rem;
		margin-right: 6rem;
		}
}

@media only screen and (min-width: 1025px) {
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h4 {
		margin-left: 10rem;
		margin-right: 10rem;
		}
}

@media only screen and (min-width: 1225px) {
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h4 {
		margin-left: 16rem;
		margin-right: 16rem;
		}
}

@media only screen and (min-width: 1525px) {		
	.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h4 {
		margin-left: 22rem;
		margin-right: 22rem;
		}
}

@media only screen and (min-width: 1525px) {
   .modular-row.center h2 {
	margin-left: 16rem;
	margin-right: 16rem;
	}
}
2

On mobile, your margin are 12rem. Just set them to 1rem or anything that suits you.

3

@werdi, Same issue with .modular-row.whitecenter, .modular-row.testimonial, .modular-row.greycenter etc…

4

I thought I had set the styles on mobile correctly… which one are you referring to?

5

The first line that you posted.

6

@AmauryH I set that line to 1rem but don’t see any difference…

7

Have you cleared grav cache ?
It might be the issue.

The line to change is the line 910 in custom.css

margin
margin1125×480 60.9 KB

8

Now it worked, thanks!

9

@werdi,

Instead of setting the margins to 1rem, I think you should delete the following snippets from ‘/css/custom.css’. This will allow the content of each module on mobile devices to occupy the full width of the device.

The parent container of the module already sets a margin of 1rem. Setting the margins also for the content to 1rem will double the margins to 2rem.

Delete at line 910:

.modular-row.whitecenter p, .modular-row.whitecenter h3, .modular-row.whitecenter h1, .modular-row.whitecenter h2 {
    margin-left: 12rem;
    margin-right: 12rem;
}

At line 1034:

.modular-row.center p, .modular-row.center h3, .modular-row.center h1, .modular-row.center h2 .modular-row.center h4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

Note: The above snippet sets the margins to 1rem, which seems ok, but there already is a margin of 1rem set by the parent container.

At line 234:

.modular-row.testimonial p, .modular-row.testimonial h3, .modular-row.testimonial h1, .modular-row.testimonial h2 {
    margin-left: 12rem;
    margin-right: 12rem;
}

Hope this helps…

By the way, the button ‘JETZT KOSTENFREI ANMELDEN’ does not wrap on mobile.

1 Like
10

@anon76427325 Thanks so much for taking the time to look into this, I appreciate it. I had already noticed about the button text. Will look into this today, and also the other issues you have pointed out. Thanks again!

11

@werdi, I think you can solve the wrapping of the button text, by adding white-space: break-spaces; to the <span>

1 Like
12

@anon76427325 Will try, thanks!