I don’t know if this is a version thing but I cannot get 1180px shortcodes to work at all. Even pasting the demo code in the plugin description will not create 3 columns.
Any ideas, please?
]]>WPAutoP is causing some spans of my grid to be as small as 7 pixels. Here’s a code snippet from my design, including the horrendous wpautop’s:
<div class=”row flexbox”></p>
<div class=”span1″><!–blank–></div>
<p></p>
<div class=”span1″>
<div class=”rule-number”>1</div>
</div>
<p></p>
<div class=”span8″>
<h3>Header here.</h3>
<p>Paragraph here, ~5 sentences.</p>
</div>
<p></p>
<div class=”span2″><!–blank–></div>
<p></div>
<p></p>
<!– Next row –>
<div class=”row flexbox”></p>
The result using Firebug: When I have resized the window such that the row flexbox is 792px wide, here’s what I get:
Auto paragraph: 115px wide
Blank span1: 7px wide
Auto paragraph: 115px wide
Span1 with just the big number in it: 14px wide
Auto paragraph: 115px wide
Span8: 114px wide
Auto paragraph: 115px wide
Blank span2: 15px wide
Auto paragraph: 115px wide
My organization told me that because the people who maintain the site are non-technical, I can’t use plugins like Disable WPAutoP to get rid of line breaks because they will have to learn HTML to put their own line breaks in. Due to the time sensitivity of the project, I need to try another grid system.
I just wanted you to be aware of this and offer any tips to anyone else dealing with WPAutoP and 1180px Shortcodes.
How would you fix this?
]]>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.
]]>