So, I'm trying to get this to display properly on mobile phone for the class 'circle-right right' div. Right now, instead of being centered, the circle-right class is displaying too far to the right instead of center. On desktop it displays correctly.
<div class="path-container">
<div class="row">
<div class="large-12 columns ">
</div>
</div>
<div class="row path-item">
<div class="large-7 push-5 columns">
<div id="img1" class="circle circle-left "></div>
</div>
<div class="large-5 pull-7 columns path-text left">
<h3 id="pstop1">Get in touch!</h3>
<a class="pathlinks" href="#" data-reveal-id="myModal">Get in touch>></a>
</div>
</div>
<div class="row path-item">
<div class="large-7 columns">
<div id="img2" class="circle circle-right right"></div>
</div>
<div class="large-5 columns path-text right">
<h3 id="pstop2">Give us feedback!</h3>
<p class="shadow">We're not happy unless your satisfied. During the process, we'll be in touch to make sure we're on the right track.</p>
Get in touch>>
</div>
This is most of the default css that comes with the foundation path template. Tried using media query to select the class and adjust the position, but it wont work. Here's a link to the template http://patterntap.com/code/responsive-timeline
css:
.path-container .path-item .circle.circle-right {
right: 100px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
right: 0;
left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
Related
I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
With how my HTML is structure I am having hard time selecting 3n child. It doesn't seem even notice the 3n selector of class heroLetter, but if I use the 1n child selector the code notices the class, but it also selects every div. I am not sure how to call the 3n child selector with this structure of classes I have made.
Code:
.heroLetter {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 600px;
color: #f5543a;
position: relative;
}
.windowWrapper .section .heroLetter:nth-child(3n) {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 200px;
color: #f5543a;
position: relative;
}
<div class="wrapper">
<div id="section1" class="windowWrapper">
<div class="section group">
<h1 class="introH1">
<span class="Grand">GRAND</span>
<span class="Stand">STAND</span>
</h1>
<p class="introP">A new font.</p>
scroll down
</div>
</div>
<div id="section2" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>STORY</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
G
</div>
</div>
</div>
<div id="section3" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>PROCESS</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
S
</div>
</div>
</div>
<div id="section4" class="windowWrapper form">
<div class="section group">
<div class="col span_6_of_12">
<h1>BEAM</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
<div class="circle"></div>
a
</div>
</div>
</div>
</div>
</div>
The nth-child refers to children of the same parent only.
You could adjust your code to refer to the outer most common element.
Some css like this should help you:
.windowWrapper:nth-child(4n) .section .heroLetter {}
In this case it's the 4th windowWrapper since it contains your 3rd heroLetter
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I'm having problems styling my page and I'm not sure what to do.
The issue I'm running into is that the container class in Bootstrap has a sizable amount of padding on each side, but I can't seem to reliably remove it. I want the red background to be flush against the grey image, and have blue in the background. The only way I've been able to work around this is by using the CSS property background-clip: content-box but then I begin to run into issues when I start adding things like box-shadows.
This is what I have right now:
This is what I want to have:
Here is my code:
<div class="container content-color">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/1140x360">
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
</div>
</div>
.circle {
background-color: #48c1b0;
height: 150px;
width: 150px;
border-radius: 50%;
}
body {
background-color: blue;
}
.content-color {
background-color: red;
}
}
JS Fiddle: http://jsfiddle.net/rxvk0w2n/
col-* has a default padding of 15px on both, right side and left side.
So, if you want to remove the padding, simply use this in your css:
.removePaddingRightLeft {
padding-right: 0;
padding-left: 0;
}
And your html:
<div class="col-md-12 removePaddingRightLeft">
<img class="img-responsive" src="http://placehold.it/1140x360"/>
</div>
Updated fiddle