Note, I'm really not trying to create a 'code for me plz' topic, I actually tried to solve this myself but I'm unable to. I found similar topics but they didn't solve my specific issue.
So, I have the following website design in Illustrator:
I need to create a container-fluid, which needs to be 50% image, and 50% color. I tried so many different methods but just couldn't make it work, especially the responsiveness.
Is there anyone who can help me out solving this? Really curious how this is done within Bootstrap.
By the way, for load time efficiency, I'm working with Bootstrap.grid.css, I do not have full access to all Bootstrap classes.
Consider reading carefully Bootstrap's documentation for its Grid Layout
You can do what you need with simple row and columns; how responsive the content inside of those behaves depends on what you build
.img-bg {
background: url("https://via.placeholder.com/1600")
}
.color-bg {
background: green;
text-align: right;
}
.row>div {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6 img-bg">
<span>This background is an image</span>
</div>
<div class="col-6 color-bg">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
</p>
</div>
</div>
</div>
Related
The top-level container on my site has a max-width to keep it a reasonable size on wide screens. I have a dynamically sized component which can potentially be wider than that max-width. Normally, the component overflows off the side of the screen with it's own independent scrollbar. But on wide screens, with the max-width, the component is cropped by the side margins and it doesn't look great.
I've got a set of styles which can effectively override the top-level max-width and instead left-justifies the component and makes it use the viewport width instead of the top level max-width. It's as follows:
.wide-content {
width: fit-content;
max-width: 100vh;
position: relative;
left: calc(-50vw + 50%);
}
The problem now is that this class is unsuitable when the component isn't too wide. It's left justifying when the component would've fit just fine within the container. I only want those components which would be wider than the container to display this way.
Is there a way to conditionally apply this class, or at least just the left property, based on the components own width? Ie. Only apply that left style if the component is wider than top-max-width?
I'd rather avoid using JS for simplicity sake, but I am using scss if that makes it simpler. I'd take a JS solution if it's the only way, but that's a last resort.
Edit for clarification, here are some pictures of what I'm describing. The cream-colored boxes (labeled Main and Main #2) are the components which get the above styles:
What it looked like originally, without the above styles and with the cropping I don't like:
What it looks like with those styles applied unconditionally:
What I want, ie. the small box displays as it did originally but the large box gets the left-justification treatment:
I'm not sure whether this is what you're looking for, but checkout this
* {
margin: 0;
padding: 0;
}
:root {
--container-max: 300px;
}
.container {
background: lightcoral;
width: var(--container-max);
margin: 0 auto;
}
.graph {
background-color: yellowgreen;
white-space: nowrap;
overflow: visible;
min-width: fit-content;
transform: translate(calc((var(--container-max) - 100%) / 2), 0);
}
<div class="container">
<h1>An H1 Heading</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio voluptatum minima architecto a omnis at iure sint officia neque sapiente quos cupiditate similique illum doloribus, accusantium natus enim! Et.
</p>
<div class="graph" contenteditable>Lorem ipsum dolor sit amet</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio voluptatum minima architecto a omnis at iure sint officia neque sapiente quos cupiditate similique illum doloribus, accusantium natus enim! Et.
</p>
</div>
The green block is contenteditable, so start typing into it and you'll see its width eventually expands past the outer container, remaining centered in the screen.
How do I make the image go under the text in the mobile? And for the text to go on the left side, instead of being more on the right - if this makes sense :)
CSS (Image): https://pastebin.com/pGBdbBhs
CSS (Content): https://pastebin.com/1SY2JXUa
HTML:
<div class="content">
<div class="left-200">
<div>
<h3>Lorem ipsum</h3>
<div class="padding-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div class="padding-10"></div>
<img src="./images/default-image.png" alt="Image" class="image"/>
</div>
</div>
Desktop:
Mobile:
Thank you!
To make a responsive design you can either go the bootstrap root or you can do the #media in the CSS. Take a look at this site which will point you in the right direction.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I solved it! Basically I wrapped it up in a div and set display:none; if the device was on mobile. And I did the same thing for desktop!
Your CSS and HTML looks a little random here and there. For example those padding divs. Also your .left-200 class has two display properties. I would recommend to clean it up and then add the paddings, margins etc.
You really only need display: flex and flex-wrap for this task and set the other values like width accordingly.
.content {
padding: 200px 50px;
display: flex;
flex-wrap: wrap;
}
#flex-text {
width: 400px;
}
<div class="content">
<div id="flex-text">
<h3>Lorem ipsum</h3>
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
-->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div id="flex-image"> <img src="./images/default-image.png" alt="Image" class="image"/> </div>
</div>
I've created the following:
And I'd like the top section 'independent' to be over to the right like the 'interactive' section. I've tried to float: right; but that's not correct.
My code is:
.badgesblock{style: 'padding-left: 30px;'}
.independent
= image_tag 'independent.png', style: 'float:left;'
.independentcopy{style: ''}
%p{style: 'font-weight: bold;'} Independent
%p{style: 'width: 450px;'} We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.
%br
%br
.verified
= image_tag 'verified.png', style: 'float:right;'
%p{style: 'font-weight: bold;'} Verified
%p{style: 'width: 450px;'} All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.
%br
%br
.interactive
= image_tag 'interactive.png', style: 'float:left;'
.interactivecopy{style: 'float:right;'}
%p{style: 'font-weight: bold;'} Interactive
%p{style: 'width: 450px;'} Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.
What am I missing in the CSS?
This is a pretty clear cut case for a piece of reusable CSS called the media object.
Its a basic building block with an image, video or whatever and associated text on the left or right.
/** Generic media object **/
.media {
overflow: hidden;
}
.media-item {
float: left;
margin-right: 25px;
}
.media.flipped > .media-item {
margin-right: 0;
margin-left: 25px;
float: right;
}
/** specific styles **/
.badge {
/* ... */
}
<div class="badgesblock">
<div class="media badge independent">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150"/>
</a>
<div class="media-body">
<p><strong>Independent</strong></p>
<p>We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.</p>
</div>
</div>
<div class="media badge flipped verified">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150" />
</a>
<div class="media-body">
<p><strong>Verified</strong></p>
<p>All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.</p>
</div>
</div>
<div class="media badge interactive">
<a href="#" class="media-item">
<img src="http://placehold.it/250x150" />
</a>
<div class="media-body">
<p><strong>Interactive</strong></p>
<p>Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.</p>
</div>
</div>
<div>
h2, p {
margin: 0;
}
.section {
border: 1px solid red;
display: inline-block;
width: 100%;
}
.section:nth-child(odd) img {
float: left;
margin-right: 15px;
}
.section:nth-child(even) img {
float: right;
margin-left: 15px;
}
<div class="badgesblock">
<div class="section independent">
<img src="http://placehold.it/100x100" />
<div class="independentCopy">
<h2>Independent</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
<div class="section verified">
<img src="http://placehold.it/100x100" />
<div class="verifiedCopy">
<h2>Verified</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
<div class="section interactive">
<img src="http://placehold.it/100x100" />
<div class="interactiveCopy">
<h2>Interactive</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
</div>
</div>
</div>
You don't have to do it like I did. I'm using some new (to you) css selectors like nth-child which makes it easier for me. But if you want to target by class or whatever, feel free. I just gave you an idea of what kind of css you need to achieve what you want.
Think of .section:nth-child(odd) like:
.section.independent img,
.section.interactive img { }
http://codepen.io/pacMakaveli/pen/jPEegN
I've spent a lot of time trying to figure out how I can create a layout similar to this, where the pages content is constrained by the container element's width, but the column on the left has a background that stretches to the far left of the user's screen (the yellow one in the example).
I'm trying to do this with Bootstrap, but it seems impossible as the container element contains the content of the page and also it's background.
Here is the JSFiddle for what I have so far.
Some sample code of the structure:
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Would really appreciate if someone can solve this mystery for me.
Here's the full code:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{
background: #eee;
}
.left-one{
background: yellow;
height: 500px;
padding-top: 20px;
}
.right-one{
background: #eee;
height: 500px;
padding-top: 20px;
}
.some-content{
background: lightslategray;
padding: 20px 0;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Just do what the guy have done in example & use the before element.
DEMO
CSS:
.left-one:before{
background: yellow;
bottom: 0;
content: "";
position: absolute;
right: 100%;
top: 0;
width: 9999px;
}
I've been trying to align a nested row when using the Foundation 4 grid, to almost no avail.
FYIs, I use EpiServer CMS so I have to inject certain styles with mixins.
The issue is that when I have an embedded div.row inside my 8-column-injected div#content, that row & its columns are not flush with the elements outside it.
I tried to add this mixin: div.unmanagedContent {#include grid-row(nest);} which works in this example, but then the negative margin pulls that div out when there is no embedded .row inside div#content.
My SCSS looks like so. Note that I've just attached an external CSS at CodePen so you'll see the outputted styles:
// 12 total columns
.contentLayoutBox {
#include grid-row;
}
#content {
#include grid-column(8);
}
#sidebarRight {
#include grid-column(4);
}
Here's an example at CodePen & the Foundation 4 Grid Docs.
Any help would be great. Thanks.
I wish could see more of your Sass code and such, but my guess is that you need to use the nest behavior on all of your nested rows.
It seems to me that Foundation's rows in Sass are designed mainly to be used at one level. ANY row that is nested within another should use the nest behavior unless you want the extra padding on the columns.
In your CodePen, I was able to fix the issues with the padding on columns by adding a class of collapse to all of the rows, which I believe is the same as doing $behavior: nest within the Sass:
<div class="unmanagedContent">
<div>
<div class="row collapse">
<div class="small-12 columns">
<div class="row wtf collapse">
<div class="small-12 columns">
<h2>Embedded .row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
</div>
</div>
</div>
</div>
</div>
</div>
If I were to try to style this with the Sass mixins, this is what I would do...
HTML:
<div class="layout-unmanaged-content">
<div class="layout-content">
<div class="layout-embedded-row">
<div class="layout-content">
<h2>Embedded .row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
</div>
</div>
</div>
</div>
Sass:
.layout-unmanaged-content {
// You'll need to have the nest here if this is within another Foundation row.
#include grid-row(nest);
> .layout-content {
#include grid-column(12);
}
}
.layout-embedded-row {
#include grid-row(nest);
> .layout-content {
#include grid-column(12);
}
}
Thanks again, #Chris Peters. The answer seems simple now.
You are right in that only top-level row classes should have the mixin #include grid-row and their decedents should be nested with #include grid-row(nest), so here's what I did:
.one-main-row-class, .another-main-row-class {
#include grid-row;
//Nest decendents of the top-level grid-row
.row {
#include grid-row(nest);
}
}