Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Layout horizontal Divs

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #235269
    dogpaw
    Participant

    My apologies in advance for using incorrect terminology and greatly appreciate your help.

    I have a WordPress test site: http://gamblin.wpengine.com/ where I widgetized and created a new area at the bottom: #footer-widget (first attempt at widgetizing).

    The issue is the four Divs within #footer-widget. I’m trying to horizontally space them out to vertically align with the widgets above. I have attempted to duplicate the CSS that I see for #footer-widgets that comes with the theme.

    However, I am unable to space out all four Divs in one horizontal line like the Divs above it. Somehow the fourth widget (from left) wraps underneath the third widget.

    http://codepen.io/dogpaw/pen/epwepG

    #235286
    Shikkediel
    Participant

    A link that needs a password and a pen without markup is likely to get little feedback…

    #235303
    dogpaw
    Participant

    My apologies.

    The test site is on hosting that requires password-protection until launch. The login is below:

    Username: demo
    Password: painter

    As far as markup, I have to admit I’m not exactly sure how to use CodePen which I setup just for this forum. I entered some of the CSS there only. I see a tab for CSS and can view that.

    Again my apologies

    #235310
    Shikkediel
    Participant

    When I calculate, I come to a different width… each item has 5.5% margin so 78% of the total is left. Divided by four, that comes to 19.5%. It looks misaligned to the left a bit though so I’m not sure what the intention was exactly.

    #235311
    dogpaw
    Participant

    You’re saying the widget width should be 19.5% instead of the 20.875%? It does seem that would work but I’m copying the width from the default portions of the theme. I wonder what, if any, difference I could be missing for some other aspect of the layout?

    #235316
    Shikkediel
    Participant

    Looking at the rest of the layout, I would remove (or override) the right margin on the last element. It will be better aligned then and the 20.875% width should be exactly as expected.

    #235319
    dogpaw
    Participant

    Thanks so much for that advice. Initially it appears I need to additionally tweak some padding. I’ll work on this some using your pointers.

    #235321
    dogpaw
    Participant

    I removed the right margin that I think you’re referring to and kept the 20.875%.

    But it’s not working the way I intended. It appears that I need to keep the right margin to match up with the column spacing with the default widgets columns.

    #footer-widget .et_pb_widget {
    margin: 0 0 5.5% 0;
    width: 20.875%;
    }

    #235322
    Shikkediel
    Participant

    I don’t know the exact workings of that template, the basic idea should work though. Something like this :

    #footer-widget .et_pb_widget:last-of-type {
    margin-right: 0;
    }
    
    #235323
    Shikkediel
    Participant

    You could add this to make the columns match better :

    #footer-widget {
    width: 80%;
    }
    
    #235340
    dogpaw
    Participant

    Excellent! The right margin worked. Thank you.

    Additionally what can I do in CSS to make these divs responsive and vertically stack on narrow screens?

    I would attach a screenshot but not sure if that is allowed/possible here.

    #235343
    Shikkediel
    Participant

    The other containers on the page are using media queries for it. I couldn’t tell you exactly what to code, it depends on at which break point you think the four elements are becoming to narrow. The template itself doesn’t do it too well, I think. But let’s put the first query at 980px for example… there instead of aligning all four this would make two double rows :

    @media all and (max-width: 980px) {
    
    #footer-widget .et_pb_widget {
    width: 47.25%;
    }
    
    #footer-widget .et_pb_widget:nth-of-type(2), #footer-widget .et_pb_widget:last-of-type {
    margin-right: 0;
    }
    }
    

    Your original style would likely have to go inside this then :

    @media all and (min-width: 981px) {
    ...
    }
    

    And there would be a break point at an even smaller size – where no margins at all are applied and the width of the elements is 100% so they stack vertically…

    #235591
    dogpaw
    Participant

    Sorry for the delay but this works great. I created another one for 480px width which appears to be good for my iPhone.

    However, can you please elaborate on what you mean by “original style” going inside….?

    Thanks

    #235592
    Shikkediel
    Participant

    By that I meant the style that was first mentioned in this topic – with all the elements horizontally aligned. It’ll likely work without a media query when the page is first loaded but may not work correctly with an orientation change. For example, say the page loads in portrait mode with a screen smaller than 981 pixels… it will then respond to that media query. But when orientation is changed to landscape, the screen will get wider and will not adapt to the new situation unless the style for the larger width is also inside a media query.

    #235594
    dogpaw
    Participant

    I just viewed on an iPad which I’m thinking is less than 981px in portrait mode first.

    Then I turned to landscape mode second and it appears to go to four columns.

    Is this is the scenario you’re mentioning?

Viewing 15 posts - 1 through 15 (of 21 total)
  • The forum ‘CSS’ is closed to new topics and replies.