I've a navigationbar like these: http://www.gymnasium-templin.de/gym/index.php and try to develop a mobile version style via css mobile queries. When I resize the navigation bar, f.e. to 320 px (instead ov 900px), I've got a "overflow". I tried to use the overflow: in css to insert a automatic break. But there is no option to realize it. overflow: scroll; works, but I want to get a "line-break" and two "lines" or more with the navigation buttons. Have everyone a idea how to realize that?
Best regards from germany.
You could use media queries, what this one does, is that as soon the screen is smaller than 330px, it will apply these css rules in between the brackets.
#media only screen and (max-width:330px) {
#element {
change properties..
}
}
I'm not sure if I understood your question correctly, let me know.
Related
I have to superimpose a form over an image, and it's not a problem, since with some CSS instruction it is simple. The problem is that I must do it responsively, in a way that with every monitor and resolution the positioning doesn't change and adapt itself.
This is an example: http://www.gruppofas.eu/siti-web/
Positioning the form in the green-bordered box it isn't a problem, but doing it in a way that, when viewing it in different resolutions or devices, it remains inside it, how can it be done?
Thanks
You should use media queries in your CSS file.
Go to your CSS and add this:
#media (max-width: 600px) { - here you add the px**** and it will resize
.YourImage/BoxClassGoesHere* {
display: none;
}
}
You can also check in google for media queries.
I hope that helped you.
I'm pretty new to Bootstrap, and I have some issues with my mobile view:
Link: http://bit.ly/1yYmgvI
Now obviously the mobile view is a mess. I'll go through a couple issues I'm having:
The navigation drop down works, but the background is non-existent when clicked.
How do I move the "we design IOS apps" up? I tried the "pull" class but that actually pulled it horizontally, not upwards.
How do I adjust the height of different rows for mobile view? As you can tell, the services height (the white background) needs to be extended much longer, but it's quite short in mobile.
I'm pretty new to this so if you guys could help me out that'd be so appreciated. Thank you in advance!
You simply need to give the background of the navigation dropdown a background-color, like this:
.navHeaderCollapse {
background-color: #222;
}
If you want to minimize the padding, so that you can move the "we design IOS apps" up, you can use a media query at your desired change browser width, which changes the padding. Use it like this:
#media (max-width: 765px) {
.xlg-buffer {
padding-top: 35px;
}
}
The same works for adjusting the heights of the different rows in "mobile view". Just use an according media-query to change the heights. For example like this:
#media (max-width: 765px) {
.row-services {
height: auto;
}
}
NOTE:
All given values are just examples, you need to adapt them to your needs. Use the browser inspector to find out which selectors you need to target and which properties you need to change.
I am currently practicing creating responsive websites.
I have a problem with the side bar on this website,
I don't believe I know how to correctly position this,
and I also don't know how to keep it from moving down when the screen width size decreases.
How can I fix this?
I have such a hard time posting code, I can't seem to get it to work past the first line or two.
I added a jsFiddle with all of the code. I made a comment where the sidebar,
.other, in my css code.
http://jsfiddle.net/jwn69/
css :
/*
Well, first, i woudnt rely on properties like 'float'. They're tricky and can get a lot of repaints in some cases, which slows down your application.
To make what you wanted, i had to change de .focus and the .other classes
.focus {
width:66.00625%;
display: inline-block;
/* 844.8px / 1280 */
background-color: #3d3c3c;
}
.other {
width: 30.99375%;
display: inline-block;
vertical-align: top;
/* 1.5% allowed on each side*/
background-color: #3d3c3c;
}
I must also warn you that responsive design isn't about doing a couple of css rules that works under every condition/screen-size. With a little more CSSing, you'll get this page looks better and eventually it will be useable on any device. But, for example, mobile apps doens't have a menu like the one you're building. It uses drawer menus and other things to show links, because their space is limited.
While you can achieve to show these contents on a very a huge screen or a very tiny, it isn't enought because every device has it's own better way to show your UI components.
So, i'd suggest you read about media-queries. They're usefull to make specific CSS rules for devices that fit a certain condition.
Then, i'd suggest you learn how to positions work in CSS
Heres your fiddle
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
On this template I've built using Foundation, everything looks correct and responsive except for both navigation bars. They're both on their own <div class="row">, yet they overlap eachother on window resize.
(There is a #media only screen and (max-width: 767px) that is supposed to make it look even cleaner, if it helps at all).
Actually if you open the page on chrome with the developer tools or in firefox with firebug, you can see that when you make the page smaller than 767px width, is when the problems enters, due your #media only screen and (max-width: 767px). i would recommend to check that css cause if you removed it from the html you get a better result, so you may check what attributes inside that css are making your div crazy.
try adding foundation.css (around line 148) .row class height to 140px and moving main-links somewhere inside top of the main-content? That code seriously need either playing around with heights/margin or div blocks imo :)
Edit: roughly editing foundation.css lines is not what you need, make separate css class for that specific height setting and trigger usage of it with correct media query (width which causes problem to occur). That way you can tune any classes you like around the top navigation, its not pretty but it gets things work.
As Jorge Aguilar said, the problem lied in a float: none that was applied to every <li>. Furthermore, I used a width: 100% property to stretch the elements across the entire screen (like it originally was with the floats, but without the overlapping)