For example, I want p to have 200px padding on the left and right. It looks fine on a big screen, but on mobile it has too much padding. How can I solve this problem?
HTML:
<div class="row">
<div class="col-lg-12 mystyle">
<p> here is text </p>
</div>
</div>
CSS:
.mystyle p {
padding: 0 200px;
text-align: center;
}
Read about media queries here: https://www.w3schools.com/css/css3_mediaqueries.asp
.mystyle p {
padding: 0 200px;
text-align: center;
}
#media screen and (max-width: 480px) {
.mystyle p {
padding: 0 20px;
text-align: center;
}
}
<div class="row">
<div class="col-lg-12 mystyle">
<p> here is text </p>
</div>
</div>
you can use percentage instead best will be writing media query
i personally use rem as unit instead of px (My personal choice)
in media query it works as you specify the width of device either max width or min width ie
#media (max-width: 767px) {
.visible-xs {
display: inline-block !important;
}
.block {
display: block !important;
width: 100%;
height: 1px !important;
}
}
Related
I have a couple of elements on my page
I want to be able to change the height of A and B dynamically based on screen height so the A and B elements so they always stick to the single screen without a need to scroll down.
Currently I am using the media queries to adjust the height of my elements
#media screen and (min-width: 1920px) and (max-width: 5000px) {
.A{
height: 600x;
}
.B{
margin-right: 400px;
}
}
#media screen and (min-width: 1279px) and (max-width: 1919px) {
.A{
height: 550px;
}
.B{
height: 350px;
}
But that solution is a bit silly as I would prefer the height of A and B dynamically changes based on current height without a need to write too much media queries for each screen size as that might be quite a lot.
Is there any smart solution for that?
We can use Flexbox to solve this with a columnar direction.
Since you used 600px/400px in your original code, I used 6 and 4 as flex-grow values for .a. and .b., respectively.
These flex-grow values are relative, so .6, .4 or 600 400 would yield the same result.
header and footer take up whatever room remains in the container after .a and b take their space.
html, body {
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container > * {
padding: .5em;
}
.a {
flex-grow: 6;
background-color: #eee;
}
.b {
flex-grow: 4;
background-color: #ff0;
}
<div class="container">
<header>header</header>
<div class="a">A</div>
<div class="b">B</div>
<footer>footer</footer>
</div>
https://jsfiddle.net/j3kxr50L/2/
<!-- language: lang-css -->
try this one
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.container {
height: 100vh; // this can gives (.container) height according to view screen
}
.a{
height: calc(60vh - 40px);//minus the header height
}
.b{
height: calc(40vh - 60px); //minus the footer height
}
<!-- language: lang-html -->
<div class="container">
<header>header</header>
<div class="a">A</div>
<div class="b">B</div>
<footer>footer</footer>
</div>
i'm having big issues trying to convert 3 divs from horizontal to vertical.
The code below shows that for a screen bigger than 1200px, everything works fine.
What i want is a responsive behaviour: by reducing the browser's width, the 3 divs are positioned one below the other. Currently, the code will adjust so that 2 divs are in the first row if there is room for it.
HTML:
<div class="example">
<div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
<div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
<div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>
and CSS:
.example {
background-color: black;
padding: 10px 20px;
text-align: center;
}
.example-item {
font-size: 0.7em;
display: inline-block;
padding: 10px 10px;
}
.example-item-1 {
background-color: blue;
}
.example-item-2 {
background-color: red;
}
.example-item-3 {
background-color: green;
}
Actual result, what i don't want
Desire result, what i want
You can use this css code and change the "max-width" property with your own decision:
#media screen and (max-width: 900px) {
.example-item {
display: block;
}
}
jsfiddle:
https://jsfiddle.net/mr_seven/1ktcqay4/2/
you can change result area width to see what will be happened if screen width changes.
In all honesty I would look at using a grid system e.g. bootstraps grid system or even better checkout flex box.
However to simply answer the question you could do this:
.container{
text-align:center;
}
.box{
height:20px;
width:150px;
border:1px solid black;
display: block;
margin:0 auto;
}
#media only screen and (min-width: 768px) {
.box {
display: inline-block;
}
}
.box1{
background:steelblue;
}
.box2{
background:indianred;
}
.box3{
background:coral;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
https://jsfiddle.net/y7c96sp8/
I'm looking to duplicate the flexbox grid system from Bootstrap. Everything works great except the media query part.
The columns stack nicely horizontally, but when a specific media breakpoint gets activated I want to stack the div's on a new line.
I guess I can do it with jQuery, but I want to try to achieve it with pure css first. I tried to look at the source files for Bootstrap but couldn't make much sense of it.
.row {
overflow: hidden;
display: flex;
width: 100%;
background-color: burlywood;
height: auto;
}
.row > .col {
padding: 14px;
border: 2px solid black;
flex: 1 1 auto;
}
.col-md-4 {
padding: 14px;
border: 2px solid black;
flex: 1 1 33.33333%;
#media (max-width: 768px) {
.col-md-4 {
//code wanted
}
}
<div class="row">
<div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
<div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
<div class="col" style="background-color:crimson;">MyColumn 3</div>
<div class="col" style="background-color:crimson;">MyColumn 4</div>
</div>
the inline styling is only for testing purposes.
You had the media query declaration inside of another css rule.
A simple solution is to change the stacking direction of the .row itself.
Edit:
If you're just trying to learn, this is fine. However, if you want to use this in production I would recommend that you copy just the grid definitions out of bootstrap instead of reinventing the wheel.
That aside, know that bootstrap is mobile first. Your original example is not. What I added below is flex-wrap and wildcarded * the box-sizing property. That's most of the magic.
*{box-sizing: border-box;} /* borders will break your layout without this */
.row {
display: flex;
width: 100%;
background-color: burlywood;
height: auto;
flex-wrap: wrap; /*this is how columns 'wrap' on smaller devices */
}
.row>.col {
padding: 14px;
flex: 1 1 auto;
}
.col-md-4 {
padding: 14px 0;
border: 2px solid black;
width: 100%;
}
#media (min-width: 768px) {/*bootstrap uses media queries for larger screens, not smaller */
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
<div class="row">
<div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
<div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
<div class="col-md-4" style="background-color:crimson;">MyColumn 3</div>
</div>
So I am in the process of mobilizing my website and I want to be able to change the way my page looks when on an iPhone.
I have two divs, one that floats left, and one that floats right so they are horizontally next to each other.
However, I am trying to figure out how can I change these two "blocks" so that they are on top of each other when looking on a phone? Here is my code for the desktop version:
<header class="intro-about">
<div class="container-fluid">
<div class="left" style="background-color: #282828;">
<h1 class="text-center">Get to know my work</h1>
</div>
<div class="right" style="background-color: #282828;">
<h1 class="text-center">Get to know me</h1>
</div>
</div>
</header>
And it looks like this:
However, I am trying to get it to look like this on a mobile phone:
I'm looking to use media queries too in my css.
This is very easy to do using display:flex and #media(max-width):
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: flex;
/*Do not forget next line, or items won't wrap*/
flex-wrap: wrap;
}
.item {
padding: 1rem;
flex: 1 0 50%;
}
.left {
background-color: blue;
}
.right {
background-color: grey;
}
/*Layout changes on screen width 700px*/
#media(max-width: 700px) {
.item {
flex: 1 0 100%;
}
}
<div class="container">
<div class="item left">Some left content</div>
<div class="item right">Some right content</div>
</div>
Figure out at which width you want to make them stack, then add the following to your CSS with the width after max-width:
#media {max-width: 700px) {
.left, .right {
float: none;
width: 100%;
}
}
Here is the media query:
#media (max-width: 480px){
html {font-size: 100%;}
.column.third, .column.two-thirds
{float: none;
width: auto;}
These are the styles for the divs referenced in the media query (I'm not sure if this is effecting things, but I included the CSS of the container div the columns are nested in).
.column {
display: block
font-size: 0.9rem;
font-weight: 600;
float: left;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-top: 1rem;
}
.column.two-thirds { width: 66.7%; }
.column.third { width: 33.3%; }
.container {
max-width:1000px;
margin: 0px auto 30px auto;
width:90%;
box-shadow: 0 0 5px #888;
overflow:hidden;
background-color: white;
}
Here is the HTML:
<div class="container">
<div class="row clearfix">>
<div class="column two-thirds">
Hello World!
</div>
<div class="column third">
Hello World!
</div>
</div>
</div>
Worked with a colleague to figure this out. The problem was with the way I combined the .column and the .(width percentage) class selectors in my style sheet. By separating the .(width percentage) selector from the .column selector, the media query could then properly set the with:auto when the browser was at the specified max-width.