Site Width Query

Support
#1

hi

If I want my entire site to be a maximum of 1000px wide and I have Site Max Width (px) 1000px set under Layout & Design, why is it not possible to set Site Width (%) to 100%? It keeps reverting to 90%. Does this not meant the content will be 900px wide instead of 1000px?

I am just looking to start at 1000px max width for all content, then progressively reduce that by using width % in media queries. Can I assume the class ID I want to control the whole container for the page is .x-container.max.width? I just wasn’t sure as I have No Container Header Footer as the template.

Will altering this also affect the blog index and posts page, which is what I am after?

URL is feastthailand.com

regards

#2

Hi @guybower1,

Thanks for writing in.

There is a script that will keep maximum width and max of container however you can force it to follow your custom CSS by adding a specific class like what you did in your navbar.

You can use the class id: x-container for both width and max width
You can also use class id .x-container.width for your width while .x-container.max for you max width.

Add !important to the CSS if you want to force the CSS to be applied on your container.

Hope it helps.

Let us know how it goes.

Thanks.

#3

hi Nico

Thanks so much for replying.

Will having certain pages with a set width be affected at all? I have my newsletter pages all set to 750px, so would not like those to be affected. I also want the images at the top of each page to span 100% left to right once it hits 480px. At the moment, the whole container is affected by the class, so if 90%, then the whole page is affected. Is there a way to have the body react to the CSS adjustments, but the image at the top span 100%?

cheers Nico

#4

Hello,

Thank you for writing in!

If you open the Chrome console in your page - you`ll see that the body tag has many classes and you can choose the class that is exclusive of this page - You can check an example here

Using these classes types, before the x-container and .x-container.width - the rule will affect only the page that you copied the exclusive class.

#5

hi John

Thanks so much for your reply.

There quite a number of newsletter pages that this will apply to. This is how I applied it previously .page-id-2899 .x-main.full, so should I change each to be .x-container or .x-container.width instead?

Just on the other point. When I set the page width to 750px on those newsletter pages, naturally the the image at the top of each page is also affected. Is it possible to have that image span 100% width when it hits 480px? I have tried various media queries using different class IDs. The images are in container .x-container.max.width, then div class .x-column.x-sm.cs-ta-left.x-1-1 and then img class img.x-img.x-img-none I never really know which is the correct one to target for the right specificity.

The media query would just be
@media screen and (max-width: 480px) {
selected class id
width: 100%;
}
}

Any suggestion on the correct class ID for the images on each of the pages in question? Basically I am just trying to have those pages 750px wide max, then from 768px down, be 97% wide and when they hit 480px, have the image span 100% width, but the body text still remain at 97%

Cheers

#6

Hi There,

To achieve what you want it’s good to understand how pages is structured and how those site width and max width are use.

Homepage -> No Container Template
By default section is fullwidth here. Edge to edge of the browser. On Section > ROW > Column Container: If this is set to ON your site max width and width will take effect on the content of this ROW. This is set to OFF on your first section >ROW so the entire single column is fullwidth.

Blog Index Page and Single post page and archive pages:
Entire content is controlled by site width and and site max width. See this: https://screencast-o-matic.com/watch/cbih28l2OB

For your newsletter pages, it still depend on the page template you were using. I did check one: http://feastthailand.com/june-july-newsletter/ and I can see you are using No container template too like homepage. This means .x-container.width or .x-container is not applicable again because those classes are only added as main page container on pages if you are using templates with container.

Now regarding what you want to achieve, if I understand you correctly, what you want to control is the container inside a section, correct? To help you better give sample pages, where you want this width to take effect.

#7

hi Lely

Thanks so much for your detailed explanation.

Yes, that’s right. So if I set a container to keep pages to my page width, how do I override that for just an image?

So an example page would be http://feastthailand.com/baan-thong-kham/ and also http://feastthailand.com/baan-rak/ There are many other pages that are the same, though

The images at the top appear to be in container .x-container.max.width. I tried to target that with width: 100%; but no result. I then dug down deeper and tried #x-section-1.x-section also with no result. Next was .x-column.x-sm.x-1-1 again with no result and finally img.x-img.x-img-none which again yielded no result. Each of those class IDs were copied directly from Chrome and only appeared to control that top image. I am trying to get in the habit of not using !important to solve everything, so am unsure if any of the above worked with that added.

Thanks so much for your patience, Lely

Regards

#8

Hello There,

Thanks for writing in! Even if you adjust .x-container.max.width it will not be fullwidth because it relies on its container which is the .x-main.full. So unless it is 100% then your image will be fullwidth. Take for example the two pages you have sent. Please insert this code in your theme options custom css:

body.page-id-7860 .x-main.full,
body.page-id-8246 .x-main.full {
    width: 100% !important;
    max-width: 100% !important;
}

body.page-id-7860 #x-section-1 .x-container.max.width,
body.page-id-8246 #x-section-1 .x-container.max.width {
    width: 100% !important;
    max-width: 100% !important;
}

Hope this helps.

#9

hi Rue

Thanks so much for your reply

I used the code in a media query and still without the effect required of having the image span 100% left to right at 480px and the body remain contained.

cheers

#10

Hi There,

I did not see that custom CSS when I check the source code of your site. Did you remove it? If not, please make sure that you clear cache. I searched the that CSS on your source code to see if there’s any custom CSS that might prevent it but it is not there at all.

#11

hi Lely

Thanks so much for your reply

Yes, I have since deleted the code. As I said, I used it in a @media only screen and (max-width: 480px) query, but it made no difference to either of those 2 pages.

As Indicated, the effect required at 480px is to have the image at the top of each page span 100% width whilst the body of the page remains as is, with some padding left and right.

Regards

#12

Hi again,

Can you please try this code:

@media only screen and (max-width: 480px) {
    .page-id-7649 .x-main.full, .page-id-7770 .x-main.full, .page-id-6891 .x-main.full, .page-id-7040 .x-main.full, .page-id-7860 .x-main.full, .page-id-7871 .x-main.full, .page-id-8246 .x-main.full, .page-id-8489 .x-main.full, .page-id-6506 .x-main.full, .page-id-9115 .x-main.full {
        width: 100% !important;
        margin: 0 !important;
    }
    body .page .entry-content.content .x-container.max.width {
        padding: 0 !important;
        width: 100% !important;
    }
    body .page .entry-content.content .x-container.max.width > div > *:not(img) {
        padding: 0 15px !important
    }
}

Let us know how this goes!

#13

hi Nabeel

Thanks so much for your reply

Yes, that appears to have been just what was needed. Now the chosen pages can adopt that look.

Thanks again

Regards

#14

Glad we could help.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.