help with boostrap 3 css

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
LVL 1
sk391Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
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
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
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
 
sk391Author Commented:
thanks - can i completely disable any resizing for smaller devices (smaller than 960px)?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
GaryConnect With a Mentor Commented:
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
 
sk391Author Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
GaryConnect With a Mentor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
sk391Author Commented:
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
 
GaryCommented:
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
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.