Website is too wide on mobile view

woodyf4u

Hi,
When I view this website https://injekracht.com/ on a mobile / smartphone, the text is displayed completely from left to right.
There is no margin between the text and the sides of the screen.
What can I do to get some space between the site content and the sides of the screen?

saguaros

The container of each section is defined with padding value:

.container, .t4-masthead .t4-masthead-detail, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --t4-gutter-x: 2rem;
    --t4-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--t4-gutter-x)*.5);
    padding-left: calc(var(--t4-gutter-x)*.5);
    margin-right: auto;
    margin-left: auto;
}

However, you set the variable --t4-gutter-x to 0 so no padding-left / right now.

.container, .t4-masthead .t4-masthead-detail, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --t4-gutter-x: 0rem;
}

You can change this value or define your own value for padding-left / padding-right.

woodyf4u

Hi,
Thank you very much for your advice.
I used guter x 0 to display the photos/modules over the entire width of the screen without a small white border on either side.
But that also appears to have an influence on the content of the rest of the site.
I followed your advice and the site now also looks good on mobile.

But I would like the photos that fill the entire width of the screen without those white borders on the sides.

Can you give me some CSS advice on how I can do that?

This concerns the following sections:
Foto-onder-header
foto-header
Section-02
section-14

saguaros

woodyf4u You can use add css rule for the class of these section, for example:

@media (max-width: 576px){
.t4-foto-onder-header .t4-section-inner.container-fluid {
    --t4-gutter-x: 0;
}
}

woodyf4u

That is it. Thank you.
I didn't use the media query because I want to show the photos at full width on all screen sizes.

This has been resolved.