Row width is short by left/right margins amount

  • Resolved therealgilles

    (@chamois_blanc)


    2 years, 9 months ago

    Hello,

    I’m looking at the home page layout of a site built with the Hestia theme. For a browser window width less than 1200px, the width is set to 1170px on the container class div. With 15px padding on each side, that’s 1140px for the inside content.

    A row class div is defined below the container class div. This row has a hestia-like-table class with a width of 100%. The row class add -15px margin on both side. Now because the row is below the container, the 100% will be equal to 1140px. The -15px left margin is going to shift it to the left and it won’t match the 1170px width of the container. So the layout looks like this:

            |15px|              1170px              |15px|
        |                1140px               |

    Even if the divs below the row add 15px left/right padding, the layout is still off center:

            |15px|              1170px              |15px|
        |                 1140px                |
        |15px|            1110px           |15px|

    It seems to me that the hestia-like-table width should have been set to calc(100% + 30px) in this case. Then the layout would look like this:

            |15px|              1170px              |15px|
        |                   1170px                   |
        |15px|              1140px              |15px|

    which would make way more sense.

    Am I missing something here?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @chamois_blanc!

    Please provide us the URL to a page where this can be seen and some screenshots highlighting the issue, so we can take a look at it.

    Thank you and have a nice day!

    Thread Starter therealgilles

    (@chamois_blanc)

    I cannot provide you with an URL as it is a staging site but here are screenshots showing the difference with the original width and with the adjusted width setting:

    https://drive.google.com/drive/folders/1gk6Y3UkW3Na36_kWLyy_8AYIy6d2ISBW?usp=sharing

    Comparing ‘With original width #1’ with ‘With adjusted width #1’ and ‘With original width #2’ with ‘With adjusted width #2’.

    • This reply was modified 2 years, 8 months ago by therealgilles.
    Thread Starter therealgilles

    (@chamois_blanc)

    By the way, the hestia ribbon section also has a CSS bug. It sets:

    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: unset;

    which makes add a parallax effect in Firefox but disables it in Chrome/Safari. I think the correct CSS in that case, for parallax effect, should be:

    
    -webkit-transform: unset;
    -moz-transform: unset;

    Hi @chamois_blanc,

    I forwarded these issues to our developers and hopefully they will be solved in the next update of the theme. Thanks for pointing these out!

    Have a nice day!

    Thread Starter therealgilles

    (@chamois_blanc)

    Thank you for your response, much appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Row width is short by left/right margins amount’ is closed to new replies.