Hey guys,
I am building a page and a designer wants a section to look like this image:
I have done everything apart from the grey box behind the text, I am using bootstrap and tried to use the 75% container but that wants to put everything in the box. Is anybody able to help or a certain way of doing this?
Thanks
Iâve done that sort of thing before using a linear gradient - for example:
linear-gradient(to right, #fff 41%, #ccc 41%);
Try something like that with your background (of course you will have to change the colours and the colour stops.
do I add that to the html or css?
Sorry. You probably already have the text content split up using Bootstrap, right? Then in the CSS, target the left-hand section (without any code I canât tell what class you are giving it), put that gradient in the background:
background-image: linear-gradient(to right, #fff 41%, #ccc 41%);
Then make the background colour of the right-hand section the same color (#ccc in my example).
yes Iâm not sure if this is the efficient way to code it but here it is:
<div class="container-fluid" style="margin-top:10%;">
<div class="row">
<div class="col" style="margin-left: 100px;">
<hr>
<h1>Three
<br>Phase Process</h1>
<h3>CREATIVITY WHICH CAPTURES THE<BR> IMAGINATIONS OF CUSTOMERS BUBBLES<BR> TO THE SURFACE THROUGH DEFINED,<BR> MEASURABLE, RESULT-DRIVEN STRATEGIES</h3>
</div>
<div class="col">
<h3>Strategy</h3>
<p>We start by getting to know you, youâre goals and the steps required
to rally youâre customers into action.</p>
<BR>
<h3>Design</h3>
<p>Targeted content, web and print based products are designed
against youâre custom strategy.</p>
<BR>
<h3>Marketing</h3>
<p>We sustainably and measurably implement the resulting designs to
engage, enthrall and excite youâre audience.</p>
</div>
</div>
</div>
I am not too sure where there gradient will sit, i have it made as a class called âthreebackgroundâ
Fix up your html a bit first, and then we can add the CSS to it (Donât use <BR> to add spacing to a layout, use margins or padding). And I see an <h1> tag, and then you go straight to an <h3> tag. This should be an <h2>. Have you validated your code yet? And if you are using bootstrap, you might want to add something like a class of col-md-5 to the first <div>and col-md-7 to the second <div> to give their width the right proportions.
Thanks for the advice is this a little better:
<div class="container-fluid" style="margin-top:10%;">
<div class="row">
<div class="col-md-5" style="margin-left: 100px;">
<hr>
<h1>Three Phase Process</h1>
<h2>CREATIVITY WHICH CAPTURES THE IMAGINATIONS OF CUSTOMERS BUBBLES TO THE SURFACE THROUGH DEFINED, MEASURABLE, RESULT-DRIVEN STRATEGIES</h2>
</div>
<div class="col-md-6">
<h3>Strategy</h3>
<p>We start by getting to know you, youâre goals and the steps required to rally youâre customers into action.</p>
<h3>Design</h3>
<p>Targeted content, web and print based products are designed against youâre custom strategy.</p>
<h3>Marketing</h3>
<p>We sustainably and measurably implement the resulting designs to engage, enthrall and excite youâre audience.</p>
</div>
</div>
</div>
It seems that col-md-5 and col-md-6 worked better for me.
Okay, that is better - but the numbers have to add up to 12.
Try giving your first div a class also of âtitleâ, for example, and the second one a class also of âtextâ, or whatever you want. Then the CSS would be
.title {
background-image: linear-gradient(to right, #fff 50%, #ccc 50%);
}
.text {
background-color: #ccc;
}
You will have to adjust this to get the exact look you would like.
Donât forget to fix those <BR> and <h3> tags at some point.
that has seemed to apply the box on the background but made the end result look like this https://imgur.com/PwQ7KqR
Are you still using the col-md-5 and col-md-7 classes? What I gave you should not have changed the layout. The first div will have class='col-md-5 title' and the second div will have class='col-md-7 text'.
I should maybe have asked what level of experience you have in html, css and bootstrap. I am leaving some information out that I assumed you knew. Sorry.
Yes this is how it is setup correctly, I believe the issue is my max-width for the site container was set to 1280px.
As this section of the site is a full width section, when i change the container to 100% it seems to be fine.
but it is all to the left now : https://imgur.com/a/WchgdIK
You need to adjust your margins and padding now. Instead of sending images of what it looks like, it would be better if you posted your code (html and css) as a working page including doctype so we can check it. The image doesnât tell us what part of the html or css is needing to be adjusted.
Hi,
You donât really want a 10% top margin as vertical margins are based on the width of the element and donât really make sense for a top margin.
Also you canât do this in bootstrap:
<div class="col-md-5" style="margin-left: 100px;">
Columns are carefully crafted and you canât just change the margins to a fixed width.!
You can offset columns using special classes (see documentation) but they must comply with the grid requirements. Please refer to the documentation before trying to change the actual grid components. (You should generally work on inner elements and let the grid do its job.) Avoid inline styles at all costs anyway.
To make it easier for people to help set up a demo on codepen or similar ( its free) and you can include all the current frameworks with a couple of clicks from the settings menu Then all you need is the relevant html and your custom css etc.
<ot>
@joey13,
I would like to recommend that you use another service to host your images. Imgur demands more from me than I am willing to give in terms of opening my PC to data mining.
click the image to see the full length view.
</ot>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
