basically whats my problem, i have to divs align with inline-block, and on small devices both have width of 100% of the screen, how can i move the first div to be after the second, on small resolution, without flexbox?
.main-area{
font-size: 0px;
}
.left-div,
.right-div{
display: inline-block;
}
#media(max-width: 768px){
.left-div,
.right-div{
width: 100%;
}
}
Related
I feel like I'm about to feel very silly in a second, but I can't for the life of me figure out what's wrong with my media query. I'm using Adobe's Brackets as my code editor, and originally thought there was a glitch in the program. But then I tested the code in jsFiddle and it's not working there either, so I must be fudging something up with the code.
Can anyone see what's wrong?
Here is my jsFiddle
HTML
<div class="helpful">
<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>
</div>
CSS
.helpful .readers {
color: #35cb1a;
font-size: .9em;
}
.helpful .thumb {
float: right;
color: #7b7b7b;
font-size: .9em;
}
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
display: block; margin: auto on elements with no specified width has no effect, since blocks with auto width stretch to the full width of their container leaving no room for margins.
Furthermore, auto margins have no effect on a floated element, and a floated element is display: block by definition.
So your media query is working, but the styles in it don't have any apparent effect on the given layout.
If you want the floated element to stop floating at 1020px and narrower, you need to override the float declaration.
If you want the text to be centered, use text-align: center instead of margin: auto.
If you want the two elements to stack vertically, keep the display: block declaration.
Putting it all together:
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
text-align: center;
}
.helpful .thumb {
float: none;
}
}
you code is perfectly fine as you want to centre align those div after some 1020px width and for that you have use this css
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
But you always need to mention width if you are using margin:auto.
I am assuming width of 200px so css should be like this
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
widht:200px;
}
}
Working fine in this fiddle https://jsfiddle.net/vgrtety9/3/
I am resizing images at 66% and everything looks great except they are left aligned. I used this code in the CSS
/*cells smaller for mobile*/
#media screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
.cell-large{
max-width: 66%;
height: auto;
display: inline-block;
text-align: center;
vertical-align: middle;
}
}
And added this to the inline styling for each element for good measure,
padding-top: .25cm; display: inline-block; text-align: center;
But they are all still left aligned. What am I overlooking? It's the honeycomb cells with team member photos on this page.
Thanks,
Rebekah
Disregard - I applied text-align: center; to a higher level container and that seems to have done the trick. Not sure why, but oh well.
So im self teaching myself responsive design & am trying to put together a right hand divider that remains the same size, while the left hand resizes down to 240 before pushing the right div down..
The reasoning - so that changing window sizes keeps the correct format and the design is suitable for various mobile devices (down to 240px).
Now with the way it is setup I cannot seem to get the right div to push down below the left once the screen width is reduced to less than 480px.
CSS
.menu {
position: relative;
float: left;
min-width: 240px;
margin-left: -240px;
}
.content {
position: relative;
float: left;
min-width: 240px;
}
#media screen {
.content {
width: calc(100% - 240px);
margin-right: 240px;
}
.menu {
}
}
What I can't figure out to do is to force the div (MENU) after the left div (CONTENT) for devices with a width of 480px or less? The reason for designing this way is so that the left content is scalable for all screen sizes (thus avoiding breakpoints for specific devices), but at the point where 480px is reached i want the elements to be displayed one after the other..
JS FIDDLE
After some lucky research, I have found that the following appears to work, but am not sure if this a reasonable or 'dirty' fix;
#media (min-width: 1px) and (max-width: 479px) {
.menu {
margin-left: 0px;
}
}
So a min-width and max-width is needed for the exception, in which the margin-left of <div class="menu"></div> is updated to 0px.
So below devices with a screen width of 480px it will shift the right side menu div down below the left side navigation div...
Take a look at this design.
What i've done is make it mobile first and percentage widths when your screen width is smaller than 480px the menu's take 100% of the space.
.content {
background:red;
position: relative;
width: 100%;
height: 200px;
}
.menu {
background:green;
position: relative;
width: 100%;
height: 200px;
}
This type of design is called mobile first and your should read about it on the web. It makes the styles load first on the mobile phone then progressively upgrade on wider screens.
I have a website where a simple DIV will be hidden when it's width if overflow'ed.
The problem is on large layouts (1000px+) when there's enough width to show off the left & right side of the div - the content is hidden, yet I want it to show.
http://sadakov.com/
div #timeline #life - the width is enough to show content, yet hidden in the large browser;
Thanks.
Check the section #timeline-section, you have a div .container. The bootstrap container class behaves like follow on medium screen :
#media (min-width: 768px)
.container {
width: 750px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Override the bootstrap with :
#media (min-width: 768px){
#timeline-section .container
{
width:100%;
}
}
I am trying to make a multi-column layout where each column is filled with images.
There must be horizontal scroll for the container of the columns, but the column gap must not change on window resize, and the last column must be able to be shown clipped on the one side.
The coloumn height depends on the parent container and when the window height is changed, the images must be reаrranged in order to fill the column with whole images (an image should not be clipped horizontally).
img {
height: 70px;
width: 100px;
}
.container
{
height:400px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-column-width: 100px;
column-width: 200px;
-webkit-column-gap: 20px;
column-gap: 20px;
}
Here is a jsfiddle of what I currently have:
http://jsfiddle.net/9dL2F/1/
Do you have any ideas how this can be done?
This is tricky. The container's entire width is divided into columns, so you can't have both a fixed column-width and column-gap. As the container's width changes, the browser wants to fill the container. See Fixed gap between CSS columns.
You could manage the width of .container: (see jsfiddle)
#media (min-width: 480px) { .container { width: 480px; } }
#media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }
...but that's a lot of queries to manage!
Does vertically-ordered images matter? If rows are fine, you could abandon CSS3 columns:
img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}
Similarly, you could float:
img { float: left; width: 100px; height: 70px; margin-right: 20px;}
I haven't used them, and there is no IE support yet, but you could try CSS3 Flexboxes.
None of these are pretty, but I don't know of a beautiful solution...maybe CSS4 will save us?
Mr.Anson says right. I should manage other columns:
2 left-columns in fixed position, 1 right-column in fixed position and content (or, container is auto-resized depends on the browser windows, as follows:
.in-content{
position:absolute;
height:auto;
color:#2d2d2d;
float:left;
left:280px;
top:33px;
bottom:auto;
right:14%;
padding:0px 10px 39px 0px;
text-align:justify;
text-decoration:none;
text-transform:none;
z-index:-33;
overflow:auto;
}
#media (min-width:27%) {.in-content{width:40%;}}
#media (max-width:40%) and (min-width:27%) {.in-content{width:27%;}}
That's all ^_^
Thanks.