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.
Related
The design I'm working on (apart from the desktop version) has been thinking for a 480px x 720px resolution, but it suppose to show ok on smaller devices. I'm having a lot of problems with the elements on it, they are all overlapping.
This is how it should look like
And this is how it looks on a smaller resolution
My main concern right now is with the overlapping elements, I know I may need to adjust some other things using media queries, but I don't want to continue until I fix this:
correctly position the menu (as it moves and finally disappear).
Show the full masked image.
Prevent buttons (images) from overlapping.
Prevent text from leaving div.
As I believe that I have a very confusing mix/absence of position and display elements on my css.
Relevant code:
#media only screen and (max-width: 500px) {
/*for the menu*/
.site-header {
display: block !important;
}
.sidebar-toggle { //the menu bar-icon properly
right: 390px !important; // I needed to do this because it was originally on the right side (im working on the Magnus theme in wordpress)
display: table;
position: absolute;
float:left;
}
/*for showing the masked image*/
.content-area { //the div that contains the "A" masking the image
overflow: hidden; //without this scroll appears
}
h1.masking-a {
display: block;
position: relative;
}
/*for the text and image buttons*/
.square-footer { //the container div
position: fixed;
}
.square-footer-text {
position: fixed;
}
.square-footer-text p {
position: relative;
text-align: center !important;
}
.square-footer img {
position: fixed;
}
}
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%;
}
}
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'm currently making a CSS layout and I have divs side by side in the main content. When the page is resized one drops below the other. When this happens I want the top div to take up the width of the parent div
#MainWrapper #Content {
float: left;
background-color:#E4E4E4;
width:100%;
max-width:1180px;
clear:left;
font-family: Bebas;
}
#Welcometext {
max-width: 500px;
min-width: 100%;
background-color:#399;
display:inline-block;
}
#Slideshow {
width: 100px;
background-color:#C96;
min-width: 200px;
display:inline-block;
}
From your last comment, I think you want to look into # media queries.
You can tell it to change specific properties when the width of the window drops below your specified width.
#media (max-width: 600px) {
#Welcometext{
Properties specific to to a screen size under 600px;
}
}
CSS Media Queries
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.