Solved

Need help fixing divs and css

Posted on 2014-03-13
4
199 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 55

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Sticky Menu 24 36
asp.net input html code have it display the content 2 22
Change box shadow 1 29
Using Specialized Fonts in CSS 1 23
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

840 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