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
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 */
}
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.
I've come across a super weird problem when it comes to media queries and browser zoom.
I'm using Chrome 52.0.2743.116 m.
The issue is this:
When you zoom in using the browser zoom to 125% and resize the browser until tablet is supposed to kick in (max-width: 1024px), there seems to be a moment where neither max-width: 1024px or min-width: 1025px is true.
If I change it to max-width: 1024.9px - it works.
Here's a quick example:
<div class="box">
Text
</div>
<div class="box">
Text
</div>
<div class="box">
Text
</div>
And the CSS:
#media (max-width:768px) {
.box {
background: blue;
}
}
#media (min-width: 769px) and (max-width: 1024px) {
.box {
background: red;
}
}
#media (min-width:1025px) {
.box {
background: green;
}
}
Example: http://codepen.io/tomusborne/pen/EyrNvG
Zoom in 125%, then resize down until it turns red. Resize up pixel by pixel, and you'll notice there's no background color at all for one pixel between tablet and desktop.
Anyone know what's going on here? Is using 1024.9px a decent solution? Am I just going crazy?
Inspecting the <html> element holds the answer:
So the page width is actually greater than 1024px and less than 1025px.
I suggest using the exact same values for both min-width and max-width.
This covers all widths, without gaps, and if there is a collision (i.e. the page is exactly 1024px wide) then whichever rule appears later in the document should take precedence.
You don't need to use min or max. if you want to apply any css for any fixed width then you can use media query like below...
#media only screen and (width : 1024px) {
/* Your Styles */
}
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
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>