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
Related
I'm having a problem moving a panel slightly of the page like that:
enter image description here
I tried width: 120%
it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4
Pls help, thank you
Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.
If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.
Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.
Check this out based on device size.
/* For devices smaller than 400px: */
body {
left-margin: 100%;
}
/* For devices 400px and larger: */
#media only screen and (min-device-width: 400px) {
body {
left-margin: 50%;
}
}
Take a look at W3's Informative Series on responsive web design.
https://www.w3schools.com/css/css_rwd_intro.asp
Im really struggling to articulate what im trying to achieve, please bear with me on this..
I've got a small "widget" on the left and side of my page.
This work fine on bigger screens.
For example, the widget is say 300px wide in the style.
However, If i load the page on a mobile or shrink the window, This becomes unfeasably small.
How do i get it to automatically change from 300px to full 100% width if a "smaller" viewspace is observed?
So say, i shrink my window , it would suddenly jump to be 100% wide rather than 300px? ( or similar)
Any ideas?
Sorry if I haven't explained it well enough. I've googled and nothing really sticks out that achieves what im doing.. maybe im not looking for the correct terms.. In a bit of a i dont know what i dont know to google it.
Cheers
What you're trying to say is "How can I make my website responsive?". You can do that with the CSS Media Queries. Check the link and google for more informations.
To give you an idea, just try this:
.my-class{
color: white;
background: black;
width: 300px;
}
#media (max-width: 600px) {
.my-class {
width: 100%;
}
}
<div class="my-class">
Some text!
<div/>
The break point here is at 600px, for large screens you have the width of the div is at 300px, for small screens you'll get the width taking 100%. (Try to resize the width of the current window while running the snippet to understand how it works).
edit: you can also use as the following style (the idea is in the min-width), if this is what you're looking for.
my-class{
width: 300px;
min-width: 100%; /* or 100vw depending on what you want */
}
Apparently,you are using the CSS-Unit "px". If you want to have a size relative to the screen, the units %, vw and vh would be useful.
% is relative to the parent element, which is probably the whole document, so you could work with that as a relative unit.
vh represents the percentage of the viewports heigth, so you could use it for the heigth of your widget
vw represents the percentage of the viewports width, so you could use it for the width of your widget
These were just some examples, if you want to learn more about the CSS Units, go to https://www.w3schools.com/CSSref/css_units.asp
I hope I could help you.
However, if you want to keep your px unit you can use the media query, as already mentioned by Il Saggio Vecchino. This allows you to have a different design at different devices.
Also take a look at https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
I'm having a few problems with the Adaptation theme for Wordpress. I installed it and optimized my blog design, and it looks amazing on mobile and tablets, but I can't stretch it to fill the whole viewport on larger desktops.
EDIT: The link provided below no longer works, but the original body{width:} was incorrectly set to 90%
Here's my blog, see what I mean? The #secondary sidebar just doesn't go all the way to the right. I've tried floating it, making the #main section go larger, (which I couldn't achieve), playing with media queries, but nothing seems to work.
My objective is to make the whole webpage a little less cluttered. Everything seems to be floated left, and it would't be a problem if it wasn't for that little sidebar :)
Changing
body.secondary-sidebar #page
{
width: 90%;
}
to
body.secondary-sidebar #page
{
width: 100%;
}
should work, you might need to adjust some of the widths etc with that change.
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