Here's my SemanticUI HTML:
<div class="ui stackable two column grid">
<div class="column">
<div class="ui list">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>
</div>
<div class="column">
<div class="ui list">
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
</div>
</div>
</div>
This is correctly producing the following at desktop resolutions:
Item 1 Item 3
Item 2 Item 4
However, at mobile resolutions (ie: when the stacking happens) it's displaying like this:
Item 1
Item 2
<--- unwanted padding!
Item 3
Item 4
So, it's in the right order but each of the columns has a load of padding around it.
I know how to override the CSS to remove the padding manually, but I'd like to know if there's a way of achieving what I want to do with SemanticUI. It doesn't necessarily have to be a solution that uses lists or grids/columns as long as I can have two columns of lists on the desktop that turns into one uninterrupted list of items on mobile.
I: Semantic UI Way
You can modify the SUI theming variables for this purpose. Here's how:
Modify definitons/collections/grid.less
#media only screen and (max-width: #largestMobileScreen) {
.ui.stackable.grid {
width: auto;
margin-left: 0em !important;
margin-right: 0em !important;
}
.ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column,
.ui.stackable.grid > .column.grid > .column,
.ui.stackable.grid > .column.row > .column,
.ui.stackable.grid > .row > .column,
.ui.stackable.grid > .column:not(.row),
.ui.grid > .stackable.stackable.row > .column {
width: 100% !important;
margin: 0em 0em !important;
box-shadow: none !important;
padding: (#stackableRowSpacing / 2) (#stackableGutter / 2) !important;
}
This is the part that is adding 1rem of padding when you go below 768px. You can modify #stackableRowSpacing variable to be equal to the padding between Item 1 and 2
II: CSS modifications:
You can test out the solution with this CSS code:
#media only screen and (max-width: 767px) {
.ui.stackable.grid > .column:not(.row) {
padding: 3px !important;
}
.ui.stackable.grid > .column:first-child {
padding-top: 1rem !important;
}
.ui.stackable.grid > .column:last-child {
padding-bottom: 1rem !important;
}
}
Replace 3px with the padding between two Items in the same column.
I'd recommend just using the extra CSS code if the issue is localized (on one page). If you want to enforce global padding rules, modifying the theming variables are a good option.
Related
I'm using bootstrap 4.5 in my project, i would use an edge to edge view when the website is opened on a mobile device.
I have a layout as the following
<div class="container">
<div class="row">
<div class="col-md-9>...</div>
<div class="col-md-3>...</div>
</div>
So when it's on a desktop it looks fine but on mobile there is too many padding and i would make the content looks like edge to edge
i've tryed to use no-gutters on row and to remove padding from container but it makes the desktop version look bad..
<div class="container mx-0 mx-sm-3">
<div class="row">
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
</div>
</div>
mx-0 sets the container margin to 0 on the x-axis and then mx-sm-3 sets it back to 3 (1rem) for small and up (sm, md, lg, and xl)
Spacing in Bootstrap
I've solved the problem by writing my own media-queryes as the following:
#media screen and (min-width: 600px) { // setting default row and cols values for non mobile screens
.row {
margin-left: -15px;
margin-right: -15px;
}
.row [class*='col']{
padding-left: 15px;
padding-right: 15px;
}
}
.row { // setting rows margin and cols padding to 0 for mobile screens
margin-left: 0;
margin-right: 0;
}
.row [class*='col']{
padding-left: 0;
padding-right: 0;
}
And by adding this to container class class="container px-0 px-sm-3"
Here is the result:
You can either write your own media-query for this or use the spacing classes provided by bootstrap https://getbootstrap.com/docs/4.0/utilities/spacing/
class="p-0" == padding: 0 !important;
You can add in your html a class named p-sm-0 and p-0
or you can add a media query just for mobile and add to container class in css padding: 0
I have a table with 3 cells per row one will be always empty and two filled they just will be alternating like info info empty ; empty info info . So I would want to get rid of the empty one in smaller resolutions and I am not sure if there is a way of doing that through media query or should I use JS.
HTML:
<div style="display: table;">
<div class="tr">
<div class="tc side"></div>
<div class="tc year">
2016
</div>
</div>
</div>
css:
.tr {
display: table-row;
}
.tc {
display: table-cell;
}
.side{
width: 45%;
}
.year{
text-align: center;
}
you can just use media query to set display:none to the element, provided that you can CSS select it
#media screen and (max-width: 767px) {
.tr > div.empty {
display: none;
}
}
this will set .tr > div.empty to hidden when screen width is smaller than 767px
I just use flex for layout, the markup like this:
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
and the normal view like this:
layout structure - default
when in a breakpoint, view like this:
layout structure - responsive
the problem is, do not change the markup and just use flex, how can I make this?
With flex, you may use min-width to set a breaking-point.
example with 2 childs at:
min-width:200px;
margin:10px;
padding:10px;
flex:1
makes a first break point at 200px + 40px margin + 40px padding = ~ 480px (mind borders too or reset box-sizing properties)inside the flex container .
Example with your structure breaking at average 750px
.grid {
display: flex;
flex-wrap: wrap;
border: solid;
}
.grid div {
padding: 10px;
margin: 10px;
flex: 1;
border: solid;
min-width: 200px;
/* from 3 childs: avearge breaking points */
/* first breaking-point at 200 x 3 + padding/margin = 730px within flex-container */
/*second breaking-point at 200 x 2 + padding/margin = 480px within flex-container */
}
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
In a responsive layout, I have two columns. The left column is the sidebar and the right column is the content.
Using a media query, when the screen width is tiny, the columns turn to 100% width and stack on top of each other.
In this case, I want the sidebar (the first div) to appear beneath the content (the second div).
I tried using float: right on a small screen once it's at 100%, but at 100% width, the float apparently doesn't matter.
.left, .right {
width: 100%;
float: left;
background: green;
}
.left {
float: right;
background: red;
}
.half {
width: 50%;
}
.space {
width: 100%;
display: block;
height: 40px;
}
And on the page:
<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>
<div class="space"></div>
<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>
Here is the fiddle: https://jsfiddle.net/ph09frvw/
I'm sure this is not the first time someone wanted to wrap the sidebar under the content, I just haven't been able to find a solution.
You can use display: flex and use the order property to change the order of the <div> elements. While floating can be helpful for horizontal alignment, it will be of little help for vertical alignment, Here is an example:
.flex {
display: flex;
flex-flow: row wrap;
}
.left {
order: 2;
flex: 1 0 50%;
background: red;
}
.right {
order: 1;
flex: 1 0 50%;
background: green;
}
.full {
margin-top: 20px;
}
.full > .left,
.full > .right {
flex: 1 0 100%;
}
<div class="flex">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="flex full">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
You could use the display:flex; property combined with flex-direction to reorder your divs. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/
Remember to reference your related class-names in your HTML elements' class attribute.
Your CSS display:block should do the trick, else try something like:
float: left
When you use: display:block on a div element, you do not need to specify width:100% as it should automatically span across the width if it is not hindered by anything else.
Make sure the position of these elements are "relative", else it may not work as expected; it may be stated globally that some specific tags should be displayed "absolute" and that may break what you're trying to achieve.
Hey I am having the following html code :
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
and in my css:
.foo {
background-color: white;
}
I can't add some margin between them as they are taking the full width due to bootstrap. Though I would like to add a separator between them (10px or so) with no background-color. How can I achieve this (I have to use bootstrap for other reasons).
You can edit the alignment of the col margins, and offset with padding:
Demo Fiddle
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
.foo {
background-color: white;
}
#media (min-width: 768px) {
.foo:first-of-type {
margin:0 5px 0 -5px;
padding-left:20px;
}
.foo:last-of-type {
margin:0 -5px 0 5px;
padding-right:20px;
}
}
body {
background:black;
}
Add another div width a col size of 1 and a width of 10px and no background. Change the column width of the others as needed.
Bootstrap columns have 15px padding by default, so could you wrap your foo class in a column? For example:
<div class="col-sm-7">
<div class="foo"></div>
</div>
<div class="col-sm-5">
<div class="foo"></div>
</div>
Then you have your foo divs with white background and 15px of padding (and no background color).
http://jsfiddle.net/3cz3zy3k/
Just put your background color on a child of the column rather than the column itself. In my experience it's best to avoid modifying grid elements in general.
.foo {
background-color: pink;
}
<div class="container-fluid">
<div class="row">
<div class='col-xs-7'><div class='foo'>...</div></div>
<div class='col-xs-5'><div class='foo'>...</div></div>
</div>
</div>
Demo