I want to define a global width for all of my pages (e.g. using a wrapper, ...). If the browser is resized below this pre-defined minimum value, the scroll bar should appear and a further resizing of the images/text or splitting up a navigation bar into two horizontal lines, is not done.
Any html/CSS code is welcome.
Thanks
You can use a media query css for the same::
EG::
#media screen and (min-width: 320px) and (max-width: 767px) {
.wrapper {overflow: scroll;}
}
Related
We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Hello I am trying to create a responsive layout. I want the buttons I have created to be fit somewhere on the left side. But when I load it on my mobile phone (sideways) it does not show all the buttons as I cannot scroll down. I don't want to have to scroll down. Can I make the size and/or spacing of the buttons dependent on the screen size?
Thank you!
http://farah-sean.samanthaongphoto.com/index2.html
For responsiveness you can use 2 methods.
Or you base your CSS style based on percent and your layout will fit on the size screen, or you can define CSS rules based on screen size with CSS property #media
See exemple bellow from W3C #media
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Defining various #media for different screen size will make your layout responsive.
I have a navigation bar, an example of which is available here: http://fiddle.jshell.net/4uq6y5fa.
This displays as expected when all the elements fit on the screen, but if I resize the window, bits of the menu start disappearing. How do I fix this?
Use CSS media queries:
#media only screen (//defined for particular width)
{
//code of nav bar and search box
}
e.g.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Alternatively, you can define widths and heights in percentages(relatively), using em instead of pixels.
I don't really get what your point is, do you want to make the menu responsive or do you want to know what the problem is?
As for making it responsive, use media queries.
W3schools, The #media rule is used to define different style rules for different media types/devices.
So for example you make your width 100% for the screen size of 1920x1080 and 50% for the size of 1024x720. So your nav will "jump" to the 50% when someone resizes the website.
On mobile (or scroll the browser to 320px) I'm getting a horizontal scroll, this appears to be assioated with the navigation on mobile as it disappears when the nav is collapsed. Does anybody have any idea what this issue may be?
The live link to my portfolio where the issue is located here
As you said, it's related to your navigation.
You have CSS that specifies a width of 100% (which you then offset, causing the overflow).
If you update your media query and specifically this line:
#media only screen and (max-width: 767px)
.nav-collapse, .nav-collapse ul {
width: 100%;
}
}
From 100% to say 90% (just a magic number, which worked for me - you'll probably want to add a new rule that targets mobile devices) and then test, you'll see it removes the overflow on mobile devices.
Use 1.000em value instead of 320pxl
I'm setting breakpoints in css using '#media only screen and (max-width: 500px)'.
When I set it to change colour upon reaching the breakpoint it works:
#media only screen and (max-width: 500px) {#container{color:black;}}
the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.
So when I set the query to:
#media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.
the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport
I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?
Answer:
I was putting my #media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?
You can change margins just as reliably as you can background colours through media queries.
See this for example:
http://jsfiddle.net/Q55MC/
#container {background: blue; margin: 50px; width: 200px; height: 200px;}
#media only screen and (max-width: 500px) {
#container{background:black; margin: 0px;}
}
Try creating a demo so that people can have a better idea about what your trying to achieve.
It looks like the 18% style is taking precedence.
Try to override it with this:
#media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}
Would the #viewport meta declaration help?
Elegantly Resize Your Page With the #viewport CSS Declaration
be aware that this post uses #-viewport when it should just be #viewport