StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

3 column layout percentages with padding

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › 3 column layout percentages with padding

This topic is: not resolved

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 14, 2017 at 6:57 am #206403
    welshartnow
    Member

    I'm trying to understand why 3 coumn layout seems to add to more than 100% when the padding is added. This works fine for me but trying to get a handle on this:

    .home-middle .widget, .home-top .widget {
    float: left;
    padding: 0 2.8%;
    width: 33.3333%;
    }

    May 15, 2017 at 6:51 am #206457
    Victor Font
    Moderator

    The padding clears an area around the content (inside the border) of an element. The three columns add up to 99.99%. It does not exceed 100%. https://www.w3schools.com/css/css_padding.asp

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 20, 2017 at 4:02 am #206731
    welshartnow
    Member

    Thank you, Victor this helped me to understand this. I was aware of the padding lying inside but was getting confused with the percentages. The percentage padding is part of the percentage that makes up the width percentage hence it does not need to be included twice.

    May 20, 2017 at 6:08 am #206737
    Victor Font
    Moderator

    If you remove the padding percent, you won't have any padding. The padding percentage is not calculated as part of the width. It is used to provide a consistent dimensions through the mobile spectrum as the width changes for different screens.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 20, 2017 at 6:29 am #206739
    welshartnow
    Member

    I tried removing the padding % and as said the block pushed out (no white space). thanks

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.