Support » Plugin: 1180px Shortcodes » How to make flexbox columns stack on resize? / 7-column span issue

  • I need the flexbox capability because not all of my columns are the same height, but on mobile (in Chrome, at least) this causes the columns to maintain their width for desktop instead of using the full width of the mobile device – not a desirable result.

    To ensure that the layout degrades into a 1-column layout for mobile, I’ve added this modified version of 1180px.min.css to the end of my custom style sheet inside a media query, which seems to test well so far with resizing the screen:

    /* Mobile / small screen styles */
    @media (max-width: 768px) {
    	/* Keep 1180px flexbox grid columns from becoming too narrow on mobile or small screens.
    	 * This is the same as the 1180px.min.css, but:
    	 * 1) All column widths: 100%
    	 * 2) Flexbox essentially turned off. */
    	body{ width:100%; margin:0; padding:0}.wrap{ width:1180px; margin:0 auto}.flexbox{ display: inline;}.row{ margin:20px 0} .row:after{ content:""; display:table; clear:both}[class*="span"]{ margin-left:2%; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box} [class*="span"]:first-child{ margin-left:0} .prototype [class*="span"]{ background:#ececec; border-radius:4px; padding:15px; text-align:center}.span1{ width:100%; float:none}.span2{ width:100%; float:none}.span3{ width:100%; float:none}.span4{ width:100%; float:none}.span5{ width:100%; float:none}.span6{ width:100%; float:none}.span7{ width:100%; float:none}.span8{ width:100%; float:none}.span9{ width:100%; float:none}.span10{ width:100%; float:none}.span11{ width:100%; float:none}.span12{ width:100%; float:none}	
    	/* other mobile styles here */

    Wanted to check with the person who made this plugin or others who have used it: is there a better solution than this? Would it be possible to incorporate a fix like this into the plugin to make flexbox behave as intended?

    By the way, my version of 1180px.min.css above fixes a bug I found in it: The span7 class is called col7 in the version of the file in GitHub right now. This causes 7-column spans to be too wide.

  • The topic ‘How to make flexbox columns stack on resize? / 7-column span issue’ is closed to new replies.