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;
Related
I'm currently working on a padding-bottom hack to prevent content reflow and it works perfect on desktop.
I have a div which has something like the following;
<div style="--imageWidth: 300; --imageHeight: 200;"></div>
And in CSS;
div {
border: 3px dashed magenta;
padding-bottom: calc(var(--imageHeight) / var(--imageWidth) * 100%)}
But on mobile the image looks like the following, it's scaling and there's a large gap between the image and text below.. See image here
Try getting rid of the inline style and stick exclusively to CSS styles. You could use media query to set parameters for mobile view, this would allow you to style 2 versions of CSS, one for desktop (your CSS) and one for mobile (the media query in your CSS).
the following code will produce a blue background, but green on mobile.
/*CSS*/
body {
background-color: blue;
}
#media only screen and (max-width: 600px) {
body {
background-color: green;
}
}
use this same logic to write specific code for your <DIV>. add an id to it and call that in css for your desktop style, then use #media to select that id and modify it on a mobile.
you will be able to test it by resizing your browser. You might also want to look into flexbox, its a life saver for this type of thing and you can write CSS inside and outside of the media query for size specific code.
Hope that answers your question. let us know what you find!
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
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 simple pages completed that seem to respond well to different size screens. I haven't done anything fancy to achieve this - just avoided fixed sizes etc.
One page, however, has a large single word in a large font:
When I resize the browser, all other content lays out correctly, but the title word of course won't break:
What is the correct way to handle this? Is there some way to adjust the font size based on the screen width?
Another option is to use viewport-percentage lengths.
vw unit: Equal to 1% of the width of the initial containing block.
You can read more about it on CSS Tricks which discusses a repaint bug for certain browsers, but you can fix it with a little jQuery.
http://jsfiddle.net/7L9QH/
CSS
h1 {
font-size: 25vw;
}
You can use media queries like:
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}
Some more info can be found here: http://css-tricks.com/css-media-queries/
Have you tried FitText?
It is a jQuery plugin made for that occasions. Quoting their description:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
I like it when the adress bar disappears on my iphone when i visit a website. This can be done by a minimal height. I try to do this a proper way with css.
If i use this, then it goes fine, except i don't find this friendly for other phones (the value is a bit extreme now..):
body {
min-height: 9000px;
}
If i use this, then it doesn't work.
body {
min-height: max-device-height;
}
what is a good way to deal with this problem?
i would use this javascript:
var height = screen.availHeight;
element.style.setAttribute("min-height", height + 'px', false);
for element u have to use the element u want to set of course...
You can use max-device-height, but only in media queries, like this:
#media only screen and (max-device-height: 500px) {
min-height: 500px;
}
(more examples here: https://mislav.net/2010/04/targeted-css/)
It will however take a lot of rules to do this for all phones.
I think it's better to try to set html, body {min-height: 100%;}. That rule will try to make the min-height 100% of the window height. Possibly, the address bar only disappears if the size is larger than the normal viewport. In that case, you may need a value that is a little larger, like 101% or maybe 110%, which is certainly less extreme than 9000px.