Solved

help with boostrap 3 css

Posted on 2014-02-08
12
514 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

708 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

18 Experts available now in Live!

Get 1:1 Help Now