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.
Related
I am very new to HTML and i am trying to make my website responsive. I chose this template from templated.co . I made some changes and gave credits to them for design. And after everything when i check for responsiveness its not responsive in mobiles/ipad. We can download the code directly from templated.co . Can any one please help me make my website responsive?
It seems the template does not come with media queries (specifications in the CSS that allows content to adapt to screen resolution). You'll need to code those yourself, as they are specific to the CSS used. Try searching for media query tutorials on youtube if you're unsure of how to code them. Also, check out this template. (You don't need to use all of the queries, but the more you use, the more flexible your site will be)
#media screen and (max-width: 699px) and (min-width: 520px) {
ul li {
padding-left: 30px;
background: blue;
}
}
An example query would look like this. Max and min define the boundaries of how the site will change under restriction, and are always in pixels. This is saying that ul and li will have 30px padding and a blue background if the screen-size pixel conditions are met. For every phone/tablet size, you need a new media query with new specifications.
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'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.
So I have a site, and I use developer tools. And view it as iPhone5s view and add media queries in:
#media (max-width: 640px) {
.example {
background: red;
}
}
But when I drag my browser I can see all the elements look normal/good. Then they all mess up and cross over one another. Then it hits the mobile view and goes normal again because of my media queries. How do I get the elements to keep in there positions. Like not lose the margins at the side and all that?
I've set alot of elements to
position: absolute;
And so I can freely move elements about the page is this why?
Thank you!
I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?
I think the best thing would be if the items simply moved down as opposed to overlapping.
You can use min-width, as #anjunatl pointed out, or you can use CSS3 media queries.
They let you tweak the CSS for any resolution range you want:
body {
color: red;
}
#media screen and (max-width: 700px) {
body {
color: blue;
}
}
When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.
Add this CSS to the body tag: min-width: 700px;