Where should I look for a code in CSS or HTML?, I am looking for the code that tells me the page width of my website, Options

[FM formacion]

Hi there!

I am designing a website and I have a problem with the page width (in computer view). In the home page it is wider than in any other entries or pages.

Where do I look for the error, in CSS or in HTML? I have started searching but if anyone can help me I would be very grateful.

Thanks!

[pandy]

It's probably because it has three images in a row, side by side. I see no problem with this. The page adopts nicely when the browser window is resized. I'd leave it as it is. It looks good to me.

[Christian J]

Hi!

Since this a complex Wordpress layout maybe it's best to not change anything, like pandy suggested. I've just tested the ideas below very quickly, and can't promise they won't have side-effects (or work at all)...

I have a problem with the page width (in computer view). In the home page it is wider than in any other entries or pages.

Do you want to make the other pages (like https://www.fabricacionmecanica.es/curso/cu...-de-mecanizado/ ) wider? Then maybe you could change the CSS width of the ARTICLE element from its current "width 65%" to the same "max-width: 1140px" that's used on https://www.fabricacionmecanica.es/ (for the DIV element with the CLASS .site-inner)? I haven't looked at any other pages than these two, though.

Or do you want to change the number of "Curso" columns on https://www.fabricacionmecanica.es/ so that each row of columns gets the same width as the other pages? Then it seems you must change the number of Curso DIVs inside their parent DIV. Currently they are grouped in three per row:

CODE

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>

...maybe you could change it to two instead:

CODE

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>
...

Perhaps you must then also change the CSS width of DIV.site-inner (the layout's container) from the current "max-width: 1140px" to "width: 65%".

This post has been edited by Christian J: Jun 22 2023, 04:03 AM

[FM formacion]

It's probably because it has three images in a row, side by side. I see no problem with this. The page adopts nicely when the browser window is resized. I'd leave it as it is. It looks good to me.

Thanks for looking at it Pandy! I appreciate your comment. I think I will try what Christian J. suggest.

[FM formacion]

Hi!

Since this a complex Wordpress layout maybe it's best to not change anything, like pandy suggested. I've just tested the ideas below very quickly, and can't promise they won't have side-effects (or work at all)...

I have a problem with the page width (in computer view). In the home page it is wider than in any other entries or pages.

Do you want to make the other pages (like https://www.fabricacionmecanica.es/curso/cu...-de-mecanizado/ ) wider? Then maybe you could change the CSS width of the ARTICLE element from its current "width 65%" to the same "max-width: 1140px" that's used on https://www.fabricacionmecanica.es/ (for the DIV element with the CLASS .site-inner)? I haven't looked at any other pages than these two, though.

Or do you want to change the number of "Curso" columns on https://www.fabricacionmecanica.es/ so that each row of columns gets the same width as the other pages? Then it seems you must change the number of Curso DIVs inside their parent DIV. Currently they are grouped in three per row:

CODE

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>

...maybe you could change it to two instead:

CODE

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>

<div class="wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-5">
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
    <div class="wp-block-column is-vertically-aligned-top is-layout-flow">...</div>
</div>
...

Perhaps you must then also change the CSS width of DIV.site-inner (the layout's container) from the current "max-width: 1140px" to "width: 65%".

Thank you Christian J!

That's exactly what I wanted. Now all the page and post widths are the same as the home page. Thank you!

[Christian J]

You're welcome!