Solved

Need help fixing divs and css

Posted on 2014-03-13
4
203 Views
Last Modified: 2014-03-26
So I am working on a web page and I am having issues with the main page.  I would like for the width to be 100% across the screen but I am having some issues adjusting the page for smaller screens.  On my screen that is about 17.5" and 1920 x 1080 resolution it looks fine, but that is not the case with smaller screens and different browsers then the one I am using.  Any suggestions on fixing this?  Thanks!
0
Comment
Question by:VBBRett
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 4

Accepted Solution

by:
Rodrigo Munera earned 167 total points
ID: 39928445
I've been using bootstrap for a while and bootstrap 3 and grid layouts are a really great way of adapting your site to be responsive to multiple screen/device sizes.

For your issue, I would use a class container-fluid to achieve 100% fluid full screen on your main container and then use columns to break up the interior columns into working parts.

http://getbootstrap.com/css/#grid
0
 

Author Comment

by:VBBRett
ID: 39928501
Great, thanks!  You have an example in code?  I was trying to replicate the Teslamotors.com design but not completely.
0
 
LVL 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 167 total points
ID: 39928554
Personally I prefer foundation http://foundation.zurb.com/

Not so different from Bootstrap that choice comes to more than personal preferance - but just so you know there is something out there
0
 
LVL 52

Assisted Solution

by:Carl Tawn
Carl Tawn earned 166 total points
ID: 39928826
All the tesla site has done is a standard 100% width wrapper div, with a content div inside with its min-width property set. That allows the page to stretch horizontally to match the browser, but restricts it to being a minimum width to support the content.
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Internet Explorer View > Style menu 3 33
Scroll 5 news at a time using vticker 2 40
How do I wrap text in dialog window 6 35
Save data in two Database, Asp 2 70
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question