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!
Related
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
I am creating a webpage using only CSS & HTML
Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.
How do I fix this ?
Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.
The solution:
Media queries:
With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.
#media (max-width: 979px) {
.h2 {
font-size: 10px;
}
}
This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the #media rule has.
Media queries w3cschools
tip:
You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)
If you have any future questions please let me know I will explain some more about media queries.
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 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;