3 replies · opened Nov 23, 2018
Hi,
I'm trying to create 4 equal columns full width, for landing page and make it responsive, media query- on screens that are 600px wide or less, the columns stack on top of each other.
Img attached as an example.
I've problems trying to use the flexbox for the template, please advise
Hello,
You can consider using the Bootstrap Grid: http://getbootstrap.com/docs/4.1/layout/grid/ . For 4 Columns you can use the following code:
...
...
...
...
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi, if i were to use <div class="col_one_fourth"></div> i will get a gap after my last column, i have already tried removing the padding and placed it in the custom.css file.
.col_one_fourth {
display: block;
position: relative;
margin: 0%;
padding: 0 0px;
}
if i were to use the bootstrap col-md-3, i will get a gap in between every column, please advise how to remove the gaps in between the columns in order for it to fit side by side across the browser, thanks
Hello,
Simply consider using the following code:
...
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard