Solved

help with boostrap 3 css

Posted on 2014-02-08
12
535 Views
Last Modified: 2014-02-08
Hello, I am having trouble with formatting a page for ipad

the url is landingpages.gweb.io/rocket/

the p.lead element (text starting with "This is a simple hero unit") gets moved to the middle of the screen, you can see this behavior by resizing any browser window to less than 960px wide.

any ideas which CSS code is causing this? how can I make this block of text display at the same position when the width is less than 960px? I want it to be to the right of the image, not on top of it.

i tried <meta name="viewport" content="height=device-height"> but it didnt work..

Thank you
0
Comment
Question by:sk391
[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
  • 5
  • 4
  • 3
12 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 200 total points
ID: 39844270
it's not just one thing. The bootstrap CSS media queries make a lot of layout changes based on the screen width. They have taken the mobile first approach by using min-width media queries. So you're working against the grain by building your site desktop first and trying to adjust for smaller screen size. You'd be better off building your site for smaller sizes first, and then making adjustments as screen size grows.

Sorry if this sounds like a bunch of mumbo jumbo, but that is how bootstrap is organized. If you try to "fix" the  layout for smaller screens you'll be constantly fighting BS (bootstrap - pun intended).
0
 
LVL 1

Author Comment

by:sk391
ID: 39844276
thanks - can i completely disable any resizing for smaller devices (smaller than 960px)?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 300 total points
ID: 39844296
Just change your column sizing for smaller screens

<div class="col-xs-6"></div>
<div class="col-xs-6">
<div class="blox-element animate fadeInDown animated" data-animate="fadeInDown">
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 1

Author Comment

by:sk391
ID: 39844325
I may be asking the wrong question then:

is there any way to make the ipad screen show the large version (ie not the "less than 960px" version)?

on portrait orientation, i get the resized version of the page, but on landscape it looks fine!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39844329
the version you are seeing is based on the width of the screen. in Protrait mode the width is smaller, so you get that version.

If you remove (delete completely) the meta tag with name viewport, you might get the result you're looking for
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 300 total points
ID: 39844332
If you want the layout to be the same on smaller screens as on larger screens then you have to declare the column classes for the small screen
md - will resize for smaller screens to take the whole width
sm - will maintain the column layout on small screens
xs - for phone screens.

Don't mess around with removing meta tags, Bootstrap is designed to be used with css declarations.

You should do some reading up on how the grid system works

http://getbootstrap.com/css/
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39844342
Here's what yo need to overrride. I suggest you add some additional classes to those elements, so as not to break BS. You can name the classes whatever you want of course.

<div class="container my-container" >
<div class="col-md-6 my-col" >

@media (max-width: 768px){
.container.my-container{
width: 100%;
max-width: 100%;
}


.col-md-6.my-col{
margin-left: 50%;
}
}

Open in new window

0
 
LVL 1

Author Comment

by:sk391
ID: 39844343
thank you both -

Cathal, could you please let me know how do I declare the column class for the small screen ("xs" option)?

for example the code you sent

<div class="col-xs-6"></div>
<div class="col-xs-6">
<div class="blox-element animate fadeInDown animated" data-animate="fadeInDown">

Open in new window


where do I add this?

thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39844347
In your code that is the start of your
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information

block, so just look in the page for that.
Make the changes to use xs (or sm might be better so on phones it defaults to one column)
and that's it.
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 200 total points
ID: 39844348
Just changing md to xs will not get you the result you're looking for.

If you work with a rigid framework, you have to either work with it the way they want you to do it - mobile first in this case, or fight it by overriding their rules - in a separate file preferably, which is referenced after the BS file.
0
 
LVL 58

Accepted Solution

by:
Gary earned 300 total points
ID: 39844354
If you want the whole page to be the same down to ipad screen sizes then use sm and not md in all your column classes.
You don't fight Bootstrap you use its classes, starting to add your own classes to force widths will only backfire
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39844367
There is more than one way to solve any problem. I think at this point you have enough information to choose which way you want to go.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 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