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%;
}
}
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/
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
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 attached an image to help explain what I am trying to accomplish. I would like to have my logo to display similar to the image when viewed in mobile. Not sure if it is some padding that is causing it to sit above and not horizontal to the menu tab.
Website address is https://chris-schilling-jksc.squarespace.com/
Password is fsj
It is displaying horizontal only. but what I feel is, you have set a height. Might help if you remove that style.
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
And also it is better to combine it with the #media queries for mobile if it works for the desktop.
#media screen and (max-width:640px) {
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
}
#media screen and (max-device-width:640px) {
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
}
Set the height of the logo to auto instead of 85px.
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
Add this css:
#media screen and (max-width:640px) {
#header #logoWrapper, #header #logoImage{
height: auto;
}
}
The problem was that height was being defined which cause it to appear large.
You have a height set for #header #logoWrapper, #header #logoImage --- leave it at auto and the elements will align based on their display: inline-block vertical-align: middle
I just checked it in dev tools.
Try this.
#media (max-width:640px){
#logoImage a {
margin-top:20px;
}
}
NOTE: Don't make the logo bigger because iPhone's width is 320px. If you increase the size of logo, then that menu icon will be disappear on mobile.
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