I have a box with a margin-top (relative to the top of the page) that gets smaller with the browser window (using vw). But the header of the page (fixed and in a different z-index) is restricted with a min-width, so when it reaches the 1000px I need the box margin-top to stop getting smaller and star getting bigger... Like the smaller the windows gets, the bigger the margin-top is...
This is the box... and now i need to create a #media screen and (max-width:1000px) where it says that the height gets bigger relative to the vw.
#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}
You can do something like this using calc()
Fiddle
header {
background: black;
height: 50px;
width: 100%;
}
main {
background: green;
margin-top: 10vw;
height: 100vh;
}
#media(max-width: 768px) {
main {
margin-top: calc(150px - 10vw);
}
}
<div class="container">
<header></header>
<main></main>
</div>
Related
I need to reduce the size of the box for mobile devices and cannot remember how to do so.
Currently, everything displays right on a website but on mobile it does not reflect and the box overfills the container
<div class="box">
<img src="img/devban.png" alt="logo"/>
</div>
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
/* width: 100%; */
width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
height: 100%;
}
you can use media query for it
inside your styles
#media only screen and (max-width: 600px) {
.box {
width: 400px;
}
.img {
width: 80%; // change the values according to your requirement
}
}
for more refer
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
Just remove the width from the .box. The default of the width property is "auto", this means a block-level element, such as a div, will fill up the available space. I would change the width to max-width so the div can shrink (for mobile) but will not expand beyond 800px (for desktop). No need for the extra complexity of a media-query then.
Also you probably want to remove the height property on the img too. Height auto means it will preserve the aspect ratio.
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
max-width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
}
when the screen size changes to less than 992px , i want the center div to come first and occupy 100% of the width whereas the left and right column should come right below it and share 45% 45% width on the same line, i want to use this for tablets, but when i try to reposition them, i manage to push the center up first but the right div falls below the left div leaving a large space to the right.
instead of
....center....
.left..right.. i get
....center....
left..........
right.........
below is the complete css & html for the divs
<section class="cbs-center-container">
<div class="column-type-1"> (left column)
</div>
<div class="cbs-content-col"> (center content)
</div>
<div class="column-type-1"> (right column)
</div>
</section>
.cbs-center-container (container)
{
padding: 30px 30px 13px 30px;
background:#eeeeee;
}
#cbs-content-col, (center div)
{
float: left;
min-height: 1px;
}
#cbs-content-col {
width: 50%;
padding: 5px 10px 60px;
}
.column-type-0{
float: left;
}
.column-type-0{
width: 25%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
#media only screen and (max-width: 992px) {
.cbs-center-container {
display:table; (first i display container as table)
}
#cbs-content-col{
display: table-header-group; (this is the div i want to show first)
width: 100%
}
.column-type-0 {
width: 45%;
display: table-footer-group; (this 2 columns should come second )
position: relative;
height: auto;
padding-right: 5px;
padding-left: 5px;
}
}
#media (max-width: 640px){ (mobile display)
.column-type-0{ width: 80%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
}
}
please help , how do i re position dom elements with ease,
its best a solution without flexbox, didnt the community think about this,
i just realised i need it now since i got into responsive web design and if i may ask isn't and average tablet screen size around 1000px ?
Most of the time you dont need to use custom css for the positioning, you just add the float to the styling.
div div_name {
float: left;
/* remaining code goes here...........*/
}
Have a question that's similar to a lot of others asked on here, but with a bit more complexity than I could find. I have two DIV columns, and I would like them to both be responsive to the container they are in (which uses bootstrap to change the container width based on the browser size).
The left div needs to be responsive up to a max-width of 597px wide. It contains an image which is using a width:100% so it shrinks as the left column shrinks, but 597px wide is the max size of the image.
The right div needs to be able to do two things... fully use the rest of the space not used by the left div in the container if there's room... BUT, if the window is sized smaller and the right div has less than 250px of the container space left when next to the left div I need it to go ahead and move the itself underneath the left div and make it 100% width.
EDIT - Another thing i just thought of... to keep the left div from making the image too small, when the left image is BELOW the max-width of 597px, I need the aspect ratio between the two divs to be 60% on the left, the 40% on the right.
I figure using #media (min-width:xx){ commands would be a big help here... it looks like Bootstrap is changing the container size at min-width:506px, min-width: 768px, and min-width: 992px.
I originally tried percentages, but that didn't end up working well and the right div wasn't taking the rest of the room when the left div hit the max-width size.
#media (min-width: 506px){
.WPProductCLeft {
position: relative;
padding-right: 15px;
padding-left: 15px; }
.WPProductCRight {
position: relative;
padding-right: 15px;
padding-left: 15px; }
}
#media (min-width: 768px){
.WPProductCLeft { width: 66.66666667%; max-width: 597px; }
.WPProductCRight { width: 33.3%;; }
}
#media (min-width: 992px){
.WPProductCLeft { width: 597px; }
.WPProductCRight { width: 39%; }
}
Obviously the left div has theclass of .WPProductCLeft and the right has .WPProductCRight. Help?
Thanks for reading!
Well, after fiddling with the code a lot more, I seemed to figure it out.
#media (min-width: 506px){
.WPProductCLeft {
margin:auto;
position: relative;
padding-right: 15px;
padding-left: 15px;
}
.WPProductCRight {
margin:auto;
position: relative;
padding-right: 15px;
padding-left: 15px;
}
}
#media (min-width: 768px){
.WPProductCLeft {
width: 60%;
float: left;
padding-right: 15px;
padding-left: 15px;
}
.WPProductCRight {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}
#media (min-width: 992px){
.WPProductCLeft {
width: 597px;
float: left;
padding-right: 0px;
padding-left: 0px;
}
.WPProductCRight {
width: auto;
}
}
The trick was using width:auto, that made a big difference. Didn't even realize you could have an auto width in css. Since the container width is predefined in size by the bootstrap based on browser width, controlling the left div was the biggest key while letting the right div just fill in the rest with auto. Using the media min-height, I was able to manipulate the two divs to responsive resize themselves based on the container divs size in that range. Not the prettiest code ever, but it works.
For well using of media query in this case we have to know which are the break points, so lets do a simple math to find them.
First lets find this:
if the window is sized smaller and the right div has less than 250px
of the container space left when next to the left div I need it to go
ahead and move the itself underneath the left div and make it 100%
width.
At this point the right div has width: 40% so all that we have to do is found what is the total width when right div has a width of 250px, we can use cross product: 250 * 100 / 40 = 625, now we have the first break point.
Lets found the second:
The left div needs to be responsive up to a max-width of 597px wide
Pretty the same left div has width: 60% now we want the total width when it has 597px so would be 597 * 100 / 60 = 995 and here is our second break point.
Now lets use them:
.WPProductCLeft,
.WPProductCRight{
float: left;
height: 200px;
}
.WPProductCLeft{
width: 60%;
max-width: 597px;
background: #f3f3f3;
}
.WPProductCRight{
width: calc(100% - 597px); /*to use the rest of the space not used by the left div*/
background: #BEECCD;
}
img{
width: 100%;
height: 100%;
}
#media (max-width: 995px){
.WPProductCRight{
width: 40%; /*to set aspect ratio between the two divs to be 60% on the left, the 40% on the right.*/
}
}
#media (max-width: 625px){
.WPProductCLeft,
.WPProductCRight{
width: 100%; /*left div to go ahead and move the right div underneath the left div and make it 100% width.*/
}
}
<div>
<div class="WPProductCLeft"><img src="https://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""></div>
<div class="WPProductCRight"></div>
</div>
The above snippet is just to illustrate I think in that way you could understand it better, now lets do it in the right way using mobile first:
Here a working JSFiddle to play with
body{
margin: 0;
}
.WPProductCLeft,
.WPProductCRight{
float: left;
height: 200px;
width: 100%; /*left div to go ahead and move the right div underneath the left div and make it 100% width.*/
}
.WPProductCLeft{
background: #f3f3f3;
}
.WPProductCRight{
background: #BEECCD;
}
img{
width: 100%;
height: 100%;
}
#media (min-width: 626px){ /*to set aspect ratio between the two divs to be 60% on the left, the 40% on the right.*/
.WPProductCLeft{
max-width: 597px;
width: 60%;
}
.WPProductCRight{
width: 40%;
}
}
#media (min-width: 996px){
.WPProductCRight{
width: calc(100% - 597px); /*to use the rest of the space not used by the left div*/
}
}
<div>
<div class="WPProductCLeft"><img src="https://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""></div>
<div class="WPProductCRight"></div>
</div>
I have 2 divs that I'm setting up to be next to each other in the desktop version of my site, and on the mobile / tablet version, I would like the right div to be on top and the left div to be underneath, with both of them centered inside their parent div. I have it set up like this:
<div id="right-top">right & top</div>
<div id="left-top">left & bottom</div>
And my CSS is like this:
#right-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #ddd;
margin: 0px auto;
}
#left-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #666;
margin: 0px auto;
}
They're floated right so that I can have the right div on top in smaller browser windows. How do I get them to be centered on smaller browsers, rather than aligned to the right side?
I would do it using mobile first design
That means defining how it will look first on small devices and progressively adding more rules for bigger screens
<div class="my-div" id="right-top">right & top</div>
<div class="my-div" id="left-top">left & bottom</div>
So we define the common rules (most of the stuff) between the 2 divs to a class (.my-div), the specifics to ids (#right-top, and #left-top)
And set a breakpoint in 860px (430px times 2 for each div), and only then, float the divs to the right.
.my-div{
width: 430px;
height: 300px;
max-width: 100%;
display: block;
margin: 0 auto;
}
#right-top {
background-color: #ddd;
}
#left-top {
background-color: #666;
}
#media only screen and (min-width: 860px) {
.my-div{
float: right;
}
}
You can test it here
You can use #media queries for responsive layout.
For eg:
#media (max-width: 769px){
#right-top,#left-top{
float: none;/*unset the floated div*/
}
}
demo
I'm trying to build a page that can run at full screen but as it scales down the divs drop and fit the content and allow scrolling. At fullscreen I'd like one big box with three little boxes on the bottom. The content in the big box changes dynamically so the div needs to be able to scale on a lower resolution device. Also, on a lower resolution device I would like the bottom three boxes to stack on top of one another and all be a fixed width to fit all of their contents. My main issue is text spilling out of the big box and being unreadable on smaller screens.
Here is the HTML:
<body>
<div class="container">
<div class="content">
</div>
</div>
<div class="footer">
<div class="widget1">
<div class="widget_contents">
</div>
</div>
<div class="widget2">
<div class="widget_contents">
</div>
</div>
<div class="widget3">
<div class="widget_contents">
</div>
</div>
</div>
</body>
Here is the CSS:
*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}
.container {
height: 80%;
width: 100%;
padding: 1em;
}
.content {
height: 100%;
width: 100%;
background: rgba(150, 50, 50, 1);
}
.footer {
height: 20%;
width: 100%;
padding-right: 1em;
}
.widget1 {
width: 55%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget2 {
width: 25%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget3 {
width: 20%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget_contents {
height: 100%;
background: rgba(55, 150, 55, 1);
}
Here is a jdfiddles of my basic layout: http://jsfiddle.net/kzoqwz9n/
Thanks!
For allow scrolling, you just need to apply 'overflow:auto;' to your block.
For stack bottom blocks you need to use media queries, something like :
#media screen and (max-width: 600px)
{
.widget1,.widget2,.widget3 {
padding-left: 1em;
float:none;
width: auto;
}
}
This exemple will stack your box when the screen is smaller than 600px.
UPDATE :
For the scrolling thing, we need to apply some changes :
.container {
min-height: 80%;
margin: 1em 1em 0 1em;
background: rgba(150, 50, 50, 1);
}
We delete the style for .content and add 'padding-top: 1em;' to .footer
Exemple here : http://jsfiddle.net/kzoqwz9n/3/
It is what you want to do ? (try to add/remove content)
You basically need media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes for switching between row and column layout
My main issue is text spilling out of the big box and being unreadable on smaller screens.
set the width to width: fit-content; (+ vendor prefixes) to allow the box itself instead of just the text content to spill out of the parent container