CODEWITHSUNDEEP
htmlcssskeleton-css-boilerplate
u111937
u111937

Reputation: 287

Change Breakpoint in Skeleton CSS

I'm looking to change the breakpoints in Skeleton CSS grid. Essentially I want the right hand column to stack underneath the left six columns once the browser hits 1000px. Here is sample code of what I'm working with:

<section>
    <div clas="container">
        <div class="row">
            <div class="six columns">
                <h2>Lorem Ipsum Dolar</h2>
            </div>
            <div class="five columns offset-by-one">
                This is my fifth column that I want to be positioned under the six columns area when the browser screen hits 1000px. This should be full width as well.
            </div>
        </div>
    </div>
</section>

Any thoughts on how to do this? Or should is it possible to set up a media query to make the left five columns stack under the first six?

Upvotes: 2

Views: 1388

Answers (1)

LetortHopper
LetortHopper

Reputation: 21

Easy to do with media queries.

.five.columns {
width: 100%;
margin-left: 0px;
}

@media (min-width: 1000px) {
.five.columns {
    width: 39.3%;
}
}

Might need to tweak it a bit but it works.

Upvotes: 2

Related Questions