I'm using Foundation 4 and I have a block grid that looks the way I want it to in portrait on my iPhone 5 (ios7), but when i turn it to landscape, it's a mess. For some reason it doesn't center anything that I have centered in portrait.
<div class="row"><!-- for centering -->
<div class="small-12 large-8 small-centered columns">
<div class="row">
<div class="small-12 large-8 small-centered columns" style="text-align:center;">
<h3 id="makemebold"><small>some long text about why my site is great<small></h3>
</div>
</div>
<div class="row">
<div class="small-12 large-8 small-centered columns">
<a href="shopping_list" class="greencallout">
Hey, User, Get Started! Woohoo!</a></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="small-12 large-6 small-centered columns">
<ul id="board" class="small-block-grid-2 large-block-grid-8" >
<li><a id="login_a" class="mobile_buttons" href="#"
title="Click here to Login">Login|Register</a></li>
<li><a id='makemebold' class="mobile_buttons" href="learn">Learn More</a></li>
<li><a href="profile" class="mobile_buttons" >Profile</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div><!-- end of centering div -->
The "long text about why my site is great" IS centered. But when flipped to landscape, it doesn't get any bigger and doesn't seem to change to the large-8 setting.
Thanks for your help!
Nevermind. I just added style="text-align:center;" to each of the div tags that wasn't centering and it fixed the problem.
Related
I am trying to build online web app using foundation and I have issue about centering 2 large-6 columns sharing 1 row. I have strange GAP between my 2 element containers (the gap is marked in RED). How can I put those elements close each other without having this gap or do you have why I have this gap ? I am not sure but I think the last column from foundation is floated to the right and thats why those 2 elements have this gap. Any clue on this ?
PIC example
<div class="mainHeader">
<div class="wrapper">
<div class="row">
<div class="large-6 columns one">
<div class="leftSide">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div><!-- end leftSide -->
</div>
<div class="large-6 columns one">
<div class="rightSide">
</div>
</div>
</div><!-- end row -->
</div><!-- end wrapper -->
</div><!-- main header -->
<div class="small-12 large-6 columns text-center">
You can use text-left and text-right like this:
<div class="mainHeader">
<div class="wrapper">
<div class="row">
<div class="large-6 columns text-left">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div>
<div class="large-6 columns text-right">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div>
</div>
</div>
</div>
Hi so I am using foundation to create a navigation bar and would like to achieve the effect seen in the photo where the logo box overlaps the content below it however currently it is expanding the height of the whole navigation bar and not just the logo section.
What I would like it to look like:
What it is looks now:
HTML
<div class="row">
<div class="logo large-3 columns">
<ul class="menu">
<li class="menu-text"><?php bloginfo('name'); ?></li>
</ul>
</div>
<div class="large-9 columns">
<div class="large-12 infobar ">
<div class="hide-for-small-only hide-for-medium-only row">
<div class="large-3 info_numbers columns grey info_padding">
20°C
</div>
<div class="large-2 columns info_numbers info_padding no-padding grey "> <i class="fa fa-phone icon-padding"></i>018803 294110</div>
<div class="large-4 columns smaller-font info_padding grey no-padding"><i class="fa fa-envelope-o icon-padding"></i>STAY#GROSVENORHOUSEHOTEL.CO.UK</div>
<div class="large-3 columns no-padding text-right">
check availability
</div>
</div>
</div>
<div class="row ">
<div class="large-12 header_info">
<header class="no-padding top-bar-item " role="banner">
<!-- This navs will be applied to the topbar, above all content
To see additional nav styles, visit the /parts directory -->
<?php get_template_part( 'parts/nav', 'topbar' ); ?>
</header> <!-- end .header -->
</div>
CSS
.logo {
background-color: $secondary-color;
min-height:10em;
position:relative;
z-index:99;
}
Give .logo a position of absolute instead of relative, and give it an explicit height and width.
I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
I am using twitter bootstrap and I would like to create a grid that will shrink according to the width of the screen and move it cells down. Right now I managed to create a grid like this: http://jsfiddle.net/D2RLR/3179/.
The problem is that the grid is not aligned very well and if I shrink the window the images are getting smaller instead of moving to the next row.
Is there any well knows practice to do that?
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="search" class="well form-search search">
<input id="search-term" type="text" placeholder="Type search term">
<button id="search-button" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="grid" class="span9">
<div class="span3">
<img class="img-polaroid" src="http://lh5.googleusercontent.com/public/zSxr-JuTje4AqFmN8zOFNcRaRm7L_QxmCaqzYSdnzHfKSHCIeM9G5NHKsdNy8BwnMLwhYHI4h_G6gNXA3c_3Zc8ggsXtPeG-fhk_IALFoH0b1HPrdxsBIszYLsUye_lvyffBsdxn_hfF9Ktng7BAgWjT56mDYBqpZXX25BC-odQ2mn8O" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/tN2kf46FC7y_IEd2vzJz9v4PhVsMFjV4scZovvLYRVTMk8OdYRBBlM1l263Nuak7rQVQHT107NfwWsZQ-9_MFoiOXKozErla4banQF51QyT5igHT-QKo6cRmUiTvVbQVkjgRYIh8sPutpY-XTrG8nEludMnt6GTuOg" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh6.googleusercontent.com/public/AF-Zvxnq21ZQFZNwC4_XQnwN9-sudTFlohx7d7llv11R_60jpmPNhW679uLMzcShWd73vNAHhuTYZHFJF3rsCh7EVczcRnm-cd6KcrLDJEWWceyBUePnOPDerPf_5sovWzACyipV4JMf4k9-HomEbOwYIrwa0SwoBDXc1mwhSxVWreCs8DLNpeMRx-o" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/IYgOn9vXVD4zHB1d67KpX9--z0NDR0URCxEPTA32KFWTSDn9l2f7XR3tt0TTRAekThgUOCH0f0dGJn5ZLh3dUAXh1IDDrlbFJNmxGeVZt_eTTIG4YB23pXSfDH1Cx5OhNoEiaCCz4QAr-e8c" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/QDiY5hfLbDwEbvJmAgrcX4vRURGFEMBO6V66-EW_4YJGW5xJNCSLwwCltUB0YT1f0QMkUeztQZaI07KcsnxqEaaByAIq-ihvwPxg4B6wJuhEDjBIh1Bu5Txz0NBijb9y1dRdnSbtPImzk2HoSAcHUqfphDJwE1gfmErGtT0Apw" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh6.googleusercontent.com/public/jIGAV-2KIt3YoKQ7zDtJN44qj6puwAk5J_GVCJCRnTTOB_idlMB-cyI9d0KTy-FL965GcOJbBeH1C8ros9FMhGxQW6ZToyr-qOYYx18FomndcKpC8TxsJAMpaz9IsT48WGfe_OgsKf9heJoEGhHGTw" alt=""/>
</div>
</div>
<div id="term-history" class="span3">
<h2>Search history:</h2>
<ul>
<li>
camera
</li>
</ul>
</div>
</div>
</div>
Change the container-fluid and row-fluid classes to container and row. Then include the bootstrap-responsive.css file. Work from there. Fluid and responsive is not the same thing, although they're related and often used together. Fluid layouts adjust their widths when resized, which seems to be not what you want. Responsive layouts generally adjust their layout when resized.
http://jsfiddle.net/tylergreen/9v296/
You will still probably want to mess with the layout a bit, but the functionality is there.