Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Where should I look for a code in CSS or HTML?

Posted by: FM formacion Jun 21 2023, 10:45 AM

Hi there!

I am designing a website and I have a problem with the page width (in computer view). In the https://www.fabricacionmecanica.es/ 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. smile.gif

Thanks!

Posted by: pandy Jun 21 2023, 12:47 PM

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.

Posted by: Christian J Jun 21 2023, 03:05 PM

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)... wacko.gif

QUOTE(FM formacion @ Jun 21 2023, 05:45 PM) *

I have a problem with the page width (in computer view). In the https://www.fabricacionmecanica.es/ it is wider than in any other entries or pages.

Do you want to make the other pages (like https://www.fabricacionmecanica.es/curso/curso-de-calculo-de-costes-en-procesos-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%".

Posted by: FM formacion Jul 3 2023, 09:15 AM

QUOTE(pandy @ Jun 21 2023, 07:47 PM) *

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. smile.gif

Posted by: FM formacion Jul 3 2023, 09:47 AM

QUOTE(Christian J @ Jun 21 2023, 10:05 PM) *

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)... wacko.gif

QUOTE(FM formacion @ Jun 21 2023, 05:45 PM) *

I have a problem with the page width (in computer view). In the https://www.fabricacionmecanica.es/ it is wider than in any other entries or pages.

Do you want to make the other pages (like https://www.fabricacionmecanica.es/curso/curso-de-calculo-de-costes-en-procesos-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!

Posted by: Christian J Jul 3 2023, 10:54 AM

You're welcome! smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)