I'm using Bootstrap with HTML to build a website. Several times I have found myself putting in line breaks in the code for design purposes. This feels n00by and I want to find a better way to do this.
Example 1: I have a navbar at the top of my page. I include it in every new page. When I type something in a page it doesn't show because it's behind the navbar and I need 3 line breaks for this on every page.
Example 2: I have a layout with a sidebar and a center page. I want them both to go a little below the screen size even if there are few links in the sidebar or little content in the center page. I feel like there is a better way than to include line breaks on every page... I also want them to be aligned.
So, please help me with ideas on how you would normally solve these problems.
It's generally a good idea to separate your presentation from the actual content, so these should be done using CSS. (In particular, there are surprisingly few situations where you want to use line breaks: addresses, poems.) There is a lot of neat stuff you can do with CSS but there's no way I can explain this in one answer, so consider reading a tutorial or a book on it.
Your Example 1 can be solved by adding a margin-top to the element that contains your content:
.content {
margin-top: 100px; /* equal to the height of the navbar */
}
Example 2 is a bit more complex, but you can use #media queries to adjust the widths of the elements depending on the size of the user's screen:
.sidebar {
width: 200px; /* normal width */
}
#media (max-width: 500px) {
.sidebar {
width: 100px; /* reduced width for smaller screens */
}
}
Related
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 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'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 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;