Solved

help with boostrap 3 css

Posted on 2014-02-08
12
544 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

624 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