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
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%;
}
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>
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...........*/
}
I have a header, it has two parts, left - the big breadcrumb, right - control buttons. Problem - when breadcrumb gets too long, right part drops down, but i want to hide breadcrumbs, not all, but the part that covers buttons. Below is image with short breadcrumb
Currently parent div is
width: auto;
text-align: left;
margin-left: 61px;
Breadcrumb is
display: inline-block;
text-align: left;
width: auto;
max-width: 60%;
overflow: hidden;
white-space: nowrap;
And the right button part is
z-index: 99999;
float: right;
display: inline-block;
I don't know why right part gets pulled down, i want just hide breadcrumb, cannot resolve it in chrome dev tool either.
This is what i want,
Maybe there is a little trick out there, noticed many variations of css display, any ideas?
Crappy demo: http://jsfiddle.net/a796joeq/
I suggest this for the "right button part":
z-index: 99999;
position: absolute;
right: 0px;
top: 0px;
display: inline-block;
Try to follow the proper concept so that you can deliver quality output.
You can use float concept to achieve this. For a better understanding, you can use widths initially.
For parent div use: 100%; For child divs use: 50% , 50% (total can be max of 100%)
Here is a fiddle (http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/) of the below:
.parent { width: 100%; background: green; overflow: hidden; }
.child1 { width: 30%; float: left; color: #fff; }
.child2 { width: 30%; float: left; color: #fff; }
HTML
<div class="parent">
<div class="child">
Child 1 content comes here.
</div>
<div class="child">
Child 2 content comes here.
</div>
</div>
the problem is you margin-left on the parent div. Change it to a percentage
Give Positions for your div's :
Parant Div :
position:relative;
Breadcrumb :
position:absolute;
Add media queries:
#media screen and (max-width: 800px) {
.breadcrumb {
max-width: 50%;
}
}
#media screen and (max-width: 750px) {
.breadcrumb {
max-width: 40%;
}
}
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.