website speed & full width image

dear Rikard,
the image on first link is full width because i make it with full width slider. but if i try to make it with color section and code #abc .container { width: 100%; } like in second link, cannot become full width. i want to make it full width with the 2nd way, because i think color section is not as heavy as slider, am I correct? if too much slider i’m afraid the website become slower. my question is:
– is there any mistake on my way with the color section and that code? do you have other code to fix it?
– can you advise how many sliders maximum i can have in one website so the website speed will be still good?

thank you

best regards,
tasya

Dear Kriesi,
already tried to set the image as a background to the color section and it works, become full width. thank you for your help, but now my problem is:

– at some pages color section really become full width at the screen, full from the left to right. but at other pages, although i have the same setting, the color section only following container area (i set it 90% at enfold general layout). that also happen to full slider and masonry gallery. some of them really full width from left to right on screen, but at other pages it’s only 90% the width, so leaving white space on the left and right. do you know any setting that i can do wrong? i attach the page link. thank you

best regards,
natasha

Dear Kriesi,
no, i don’t have that code in quick CSS. but i ever have a problem with boxes that look messy in mobile layout like samsung note, and ask kriesi for codes to fix it like below:

my question at that time:
i make box with text and button for link at my webpage (tempat wisata, transportasi, belanja etc). it is doing well at computer screen, tablet portrait layout, small iphone screen portrait and horizontal layout. but when i try to preview it at my samsung note 5.0 screen, horizontal, the 3 boxes in the middle become shorter than the leftest & rightest box, and also the text transportasi is cropped. can you help, maybe there is a way to make it automatically smaller? when it’s on tablet portrait, the boxes automatically become vertical composition. thank you

and i got these codes, and it fixed my messy boxes:
@media only screen and (max-width: 990px) {
.responsive #top #wrap_all .flex_column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
}

maybe that codes have effects ? i gave you my user and password also to look at the dashboard. thank you

best regards,
natasha

Dear Kriesi,
i try to make my questions clearer yah. before i asked this above:

– at some pages color section really become full width at the screen, full from the left to right. but at other pages, although i have the same setting, the color section only following container area (i set it 90% at enfold general layout). that also happen to full slider and masonry gallery. some of them really full width from left to right on screen, but at other pages it’s only 90% the width, so leaving white space on the left and right. do you know any setting that i can do wrong?

and then you replied:

It looks like you have this in Quick CSS:

.responsive .container {
max-width: 90%;
}

i have checked, i don’t have that code at my quick CSS. but i do have code like this in my quick CSS, because at that time i make boxes for link, and the boxes look ok on computer screen, but become messy when at samsung note, so i ask how to fix it and Victoria gave me these code:

@media only screen and (max-width: 990px) {
.responsive #top #wrap_all .flex_column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
}

maybe these codes made my color section/slider become 90% width? i attach also my screen shot and username password for wordpress dashboard. thank you

best regards,
natasha