How to increase a specific page width and remove margin inside of the page content

Store Design
1

Hi

I would like to ask 2 question about a page content below. I created a template liquid for this specific page.

Theme: supply

URL: https://tohokucraft.com/pages/test

Template: page.landing-page.liquid

  1. How to increase this specific page width without affecting header and footer. I prefer this body width is 800px.

  2. How to remove margin between images in this page.

Aki_TW_0-1631265897009.png
Aki_TW_0-1631265897009.png1330×597 413 KB

Regards

2

@Aki_TW

Please add the following code at the bottom of your assets/theme.scss.liquid file.

div#test .rte{
width: 800px;
}
div#test .rte>div {
    margin-bottom: 0px !important;
}

Hope this works.

Thanks!

3

@dmwwebartisan

I really appreciate your help. I have added that codes but those images are still rendered at 657px and the margin has not removed yet.
Could you possibly check it for me again?

Regards

4

@Aki_TW

Can you provide a screenshot?

5

@dmwwebartisan

Hi, please see attached the screen shot.

Aki_TW_0-1631271926916.png
Aki_TW_0-1631271926916.png1920×2850 510 KB

6

@Aki_TW

Please try the following code for the margin.

@media only screen and (min-width: 769px){
body#test .push--large--one-sixth{ left:0px !important; }
body#test .large--two-thirds { width: 100% !important; }
}
7

@dmwwebartisan

Yes! it looks the page width increased but the margin between those 2 images are still there…

Aki_TW_0-1631278732272.png
Aki_TW_0-1631278732272.png1920×3398 740 KB

8

@Aki_TW

Please add the following code for the image margin.

div#test .rte>div {
    margin-bottom:  -6px !important;
}
9

@dmwwebartisan
It works! Thank you for helping me out.

Regards