Scenario :
I have two div. One div is title and another is form.
But when I resize it in some screen mobile it not correct.
Todo :
I want when I resize in some screen margin left div title and div form.It
mean when resize margin left of title according to the margin left div form.
How to fix it ?
I hope that I am getting this correct. My understanding is that you are hoping to place the title above the form when viewing on a mobile screen. This is easily done using media queries. See below. W3Schools | Media Queries
<div id="div1"></div>
<div id="div2"></div>
#media only screen and (max-width: 600px) {
.div1 {
display: block;
}
.div 2 {
display: block;
}
}
.div1 {
display: inline-block;
width: 40%;
}
.div 2 {
display: inline-block;
width: 40%;
}
Media queries are powerful because you can use them to dynamically filter styling methods like setting the divs above to display as block. (Filling the entire width of it's container) instead of being placed on the same line as the other block and taking only 40% of it's container. If needed, please submit a markup for review.
Related
Is it possible to set width this same like container in css? OK, I'll display you my problem. I want to make side responsive menu which will be hide in mobile and visible on Desktop. So, I want to main content (on mobile) have width like their container and I will use translate in order to hide menu. For example
.container{
display: flex;
transform: translateX(-150px);
}
.menu {
width: 150px;
}
.content {
width: 100%;
}
I know that in JS it's possible to check container with and change .content width dinamically but I want to know that is better way to realize that.
You can use media queries to change the with dynamically based on screen size.
Here is the documentation on MDN, but probably something like this:
#media (max-width: 500px) {
/* Here are styles for screens equal to or narrower than 500px */
}
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
Picture the following:
A navbar on top, a sidebar on each side of the page (left and right) and a content div sandwiched between those asides. Everything looks great on a desktop.
Enter a media query for a single column layout for mobile view. Now the layout is Nav, left sidebar underneath, content under that and the right sidebar under the content.
My question is how to get the right sidebar under the left sidebar for the mobile media query but leave it untouched for the desktop view, without touching the markup and only changing the CSS. Here is a link to a fiddle to show what I mean:
Fiddle
Everything for the desktop layout is inside of a
#media only screen and (min-width: 768px) { }
CSS block.
I know you've asked for "only changing the CSS". So first of all maybe there is a solution with the new css order functionality. But then why not using a much simpler way with changing the markup only a little bit (DEMO).
In the following example I've removed every piece of code not needed to demonstrate the solution in your fiddle.
You could just move the right sidebar before the content element and then float them left/right in desktop mode.
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
In mobile mode, you remove the float so that the 3 elements get back to their original "markup position".
#media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}
I have HTML
<div class="Box">
<img width=100% src="...">
</div>
<table class="tab1">
...
</table>
I want these two elements to reposition depending on the size of the screen that they are displayed on. On narrow screens such as mobile phones or low-resolution projectors I want the table to appear centered underneath the div. With the div scaled to take up the full width of the parent element. But on wide screens I want the table to appear next to the div, with the two of them taking up the full width of the parent element.
Is it possible to do this in pure CSS?
You need responsive web design. Here's a good article on how to do it: http://alistapart.com/article/responsive-web-design
You can try to use CSS3 #media for that problem.
.Box
{
width: 100%;
}
/* overwrite, if smartphone */
#media screen and (max-width: 480px)
{
.Box, .tab1
{
width: 50%;
}
}
Alternative you can try media type handheld:
#media handheld
{
.Box, .tab1
{
width: 50%;
}
}
found on: http://www.w3schools.com/css/css_mediatypes.asp
What I am trying to do is, putting two divs in one line, the left div's width is fixed and the right one, gets resized when the browser is resized (achieved already). What I want to achieve is, set a resize limit for the right div, that is, the right div width decreases until the width is greater or equal to n px. after that the browser horizontal scroll.
(The reason for this is I have got a jquery tab on the right div with like 5 tabs, when I resize the browser the tabs jumps off on button of each other, hence I want to stop the right div to shrink until the last tab).
here is my code so far:
<div style="float: left; width: 300px; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
Please let me know if there is a better way of putting two div in one line (left width fixed and right resizable with limit).
Cheers,
You'll either be looking at min-width/max-width, or #media
For min-width just give a class or id to div2 and set min-width
#div2{
min-width:900px;
}
For control on different screen sizes use #media and set max/min widths.
#media only screen and (max-width: 499px) {
/* rules that only apply for canvases narrower than 500px */
}
#media only screen and (min-width: 500px) {
/* rules that only apply for canvases wider than 500px */
}
There's more information here: https://mislav.net/2010/04/targeted-css/
Try:
<div class='left'></div>
<div class='right'></div>
<styles>
.left {
float: left;
margin-right: 10px;
width: 300px;
}
.right {
float: left;
max-width: 300px;
overflow-x: auto;
}
</styles>