Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need help fixing divs and css

Posted on 2014-03-13
4
Medium Priority
?
230 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 668 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 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 668 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 664 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 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