I'm currently in the process of designing part of my web page, but have encountered difficulty positioning the contact cards as they appear below:
Currently the second column of contact cards is not vertically aligned because of the follwing markup structure. The <h2 class="text200 margbottom margtop">Contact Us</h2> is 'pushing' the other 2 contact cards in the first grid 4 down vertically, but of course this is not happening in the second grid 4 as no <h2> is present. Is there any way to have the contact cards positioned at the same height so they are aligned horizontally as shown in the image above by amending my HTML markup?
Here is the link: http://www.bestcastleintown.co.uk/pg/
<div class="grid_4">
<h2 class="text200 margbottom margtop">Contact Us</h2>
<div class="contact_block_tiny trophy clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny target clearfix">
<!-- content -->
</div>
</div>
<div class="grid_4 omega">
<div class="contact_block_tiny drink clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny editorial clearfix">
<!-- content -->
</div>
</div>
Is the "Contact Us" the heading for the first column or for both columns? If it is the heading for both columns, then why do you put it inside the first column? That's not where it belongs semantically, and consequentially breaks your layout.
Related
I would like to do the following:
I have a Bootstrap layout with Descriptions of two employees.
<div class="container">
<div class="row">
<div class="col-md-6">
EMPLOYE1
HEADING1
HEADING2
HEADING3
...
</div>
<div class="col-md-6">
EMPLOYE2
HEADING1
HEADING2
HEADING3
...
</div>
</div>
</div>
How do I...
Align Heading1 with Heading1, Heading2 with Heading2, ... if the cols are beside each other?
Not care about the Heading alignment if the cols are below each other?
I have searched google/duckduckgo but it seems that there are too many alignment issues with alignment in html. Or maybe what I'm trying is just not possible?
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
I am trying to convert my non responsive site to responsive using bootstrap. I am starting with the top banner. It is 1000px * 400 px. It has a login link on top right. Below that on the left there is a site title saying(my website title: slogan). And below that on the right there is search. I am able to implement it but confused about how to do it. My site is fixed container 1024px.
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">Login links</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:left;">Site banner title</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">search box</p>
</div>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
I have few doubts? Like is it okay to give three rows directly inside one row or should
I give an intermediate col-md-12 like given above?
Is this code the right way to do what I am trying to achieve or is there a better way and is this correct from
bootstrap rules.. I am new to bootstrap and I feel guilty I am not abiding by rules.
Like I mentioned in the comment, your nesting is correct but may be extraneous.
Simplified Markup
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="clearfix">
<p class="pull-right">Login links</p>
</div>
<div class="clearfix">
<p class="pull-left">Site banner title</p>
</div>
<div class="clearfix">
<p class="pull-right">search box</p>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
To answer your question in the above comment:
is it necessary for col-md-* inside every row to add up to 12?
That is almost correct, the sum of col-md-* should not exceed 12 within a row in order to maintain the desired column layout on medium device resolution.
Note about offsets:
if you're using col-*-offset-*, make sure the sums of the cols and offsets does not exceed 12 within a row.
I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.
I am having hard time aligning elements inside the footer of a jQuery Mobile Page.
We have three different pieces of information to display: COPYRIGHT, VERSION NUMBER and CONNECTION STATUS. The goal is to align the footer in such a way that COPYRIGHT is left aligned, VERSION NUMBER is centered and CONNECTION STATUS is right aligned all on the same footer line.
I tried the following which unfortunately, did not work:
<div data-role="footer">
<span style="text-align:left">COPYRIGHT</span>
<span style="text-align:center">VERSION NUMBER</span>
<span style="text-align:right">CONNECTION STATUS</span>
</div>
Any suggestions how to accomplish this alignment setup?
Many thanks!
You should use jQuery Mobile grid like this:
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="text-align: left;">COPYRIGHT</div>
<div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div>
<div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>
</div><!-- /grid-a -->
</h3>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/e2uaU/
And style it as you want. Everything should be wrapped in h3 tag so that footer can retain its height.