Solved

Need help fixing divs and css

Posted on 2014-03-13
4
193 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
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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IFRAME in a ASPX file no longer working 3 27
Autoprefixer and text editors 1 26
Tags from access to excel 3 31
How to change pointer icon to hand icon on mouseover 2 19
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

867 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now