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
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
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 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 */
}
}
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
I just finished a rough draft of a site I've been constructing. Unfortunately, I'm starting to notice how poor the design looks both on smaller resolution screens as well as when the user shrinks his/her current screen size.
The site I'm referring to can be seen here. Furthermore, the functionality I'm looking for can be seen on most any professional site, but I especially noticed it on IBM's site. When the screen is minimized the header content stays intact along with the rest of the site. I was looking for overlow: auto somewhere in their css, but I did not see it anywhere.
What can I change to fix this issue?
PS: I figured it would be easier to link to my site rather than posting code here. However, if you want some code just let me know and I'll embed something in here.
Take care,
Evan
#full-height-template-container {
width: 1300px; <----- in your app here now the width is in %
border: 1px solid #262626;
height: 515px;
margin: 0 auto 20px;
overflow: auto;
}
as you see I used the width in pixels, this way the site stays intact. if this is what you need, then it's ok.. if not, let me know and I'll see what else can be done.
IBM.com isnot doing anything noticeably different than you are.
If you want your design to be accessible and usable on different devices, you might consider responsive design. However, be sure it's worth your time. Your users might not be visiting with, say, an iPhone to make it worth your time.
Visually, what about having your menu span horizontally, instead of vertically? And also centering your image to its parent container?