Solved

help with boostrap 3 css

Posted on 2014-02-08
12
522 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 39
html border input line 7 16
CSS Style Effect 2 12
Non-Resizable Pharagraph 2 7
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.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

830 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