Solved

Why does my Dawn theme 2.0 layout width narrow automatically?

Slav1c
Tourist
4 1 1

I am using dawn theme 2.0

My page: https://veyrey.com/

I set the width to 1600 px

After few seconds after opening a random page it's getting automatically narrowed (to cca 1000px).

What could be behind that? 

Thank you.

 

 

Accepted Solution (1)
Slav1c
Tourist
4 1 1

This is an accepted solution.

Hi @RajatWeb 

 

thank you, unfortunately I didn't find this  css file name in my folder . I found similar fragment of code in "base.css"

 

 

.page-width {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 1.5rem;
}

.page-width-desktop {
padding: 0;
margin: 0 auto;
}

@media screen and (min-width: 750px) {
.page-width {
padding: 0 5rem;
}

.page-width--narrow {
padding: 0 9rem;
}

.page-width-desktop {
padding: 0;
}

.page-width-tablet {
padding: 0 5rem;
}
}

@media screen and (min-width: 990px) {
.page-width--narrow {
max-width: 72.6rem;
padding: 0;
}

.page-width-desktop {
max-width: var(--page-width);
padding: 0 5rem;
}
}

.element-margin {
margin-top: 5rem;
}

.spaced-section {
margin-top: 5rem;
}

.spaced-section:last-child {
margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
.element-margin {
margin-top: calc(5rem + var(--page-width-margin));
}

.spaced-section {
margin-top: calc(5rem + var(--page-width-margin));
}

.spaced-section:last-child {
margin-bottom: calc(5rem + var(--page-width-margin));
}
}

.spaced-section--full-width + .spaced-section--full-width {
margin-top: 0;
}

 

I tried to remove max-width: var(--page-width);  but it didn't help, layout was wider (fullscreen), but after few miliseconds it narrowed to 1000px.

 

Thanks again

View solution in original post

Replies 4 (4)

RajatWeb
Shopify Partner
197 46 62

Hi @Slav1c,

Please Go to Online Store->Theme->Edit code then go to assets/constactus_front.css

.page-width {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 55px;
    padding-right: 55px;
    width: 100%;
}

Remove 

max-width: 1100px;


This will fix the width issue.
Thanks

If helpful then please Like and ✔️ Accept Solution.
Do you need custom changes on store ? please send me a personal message and we can discuss.
Email: rajatsharma.web@gmail.com
Skype: rajatsharma.web
Slav1c
Tourist
4 1 1

This is an accepted solution.

Hi @RajatWeb 

 

thank you, unfortunately I didn't find this  css file name in my folder . I found similar fragment of code in "base.css"

 

 

.page-width {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 1.5rem;
}

.page-width-desktop {
padding: 0;
margin: 0 auto;
}

@media screen and (min-width: 750px) {
.page-width {
padding: 0 5rem;
}

.page-width--narrow {
padding: 0 9rem;
}

.page-width-desktop {
padding: 0;
}

.page-width-tablet {
padding: 0 5rem;
}
}

@media screen and (min-width: 990px) {
.page-width--narrow {
max-width: 72.6rem;
padding: 0;
}

.page-width-desktop {
max-width: var(--page-width);
padding: 0 5rem;
}
}

.element-margin {
margin-top: 5rem;
}

.spaced-section {
margin-top: 5rem;
}

.spaced-section:last-child {
margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
.element-margin {
margin-top: calc(5rem + var(--page-width-margin));
}

.spaced-section {
margin-top: calc(5rem + var(--page-width-margin));
}

.spaced-section:last-child {
margin-bottom: calc(5rem + var(--page-width-margin));
}
}

.spaced-section--full-width + .spaced-section--full-width {
margin-top: 0;
}

 

I tried to remove max-width: var(--page-width);  but it didn't help, layout was wider (fullscreen), but after few miliseconds it narrowed to 1000px.

 

Thanks again

tanjamedic
Shopify Partner
3 0 1

If anyone has the similar issues, this is what worked for me:

 

Config > settings_data.json > page_width...set the size.  

 

 

Toni227
Visitor
1 0 0

Worked for me thank you!