Trying to figure out why my top container isn't laying out correctly. I'm just getting into CSS Grid.
https://codesandbox.io/embed/stupefied-haze-v633r?fontsize=14&hidenavigation=1&theme=dark
Edit
I found my problem finally, my header container wasn't placed to close at the correct spot. Rookie mistake( That I wish I would stop making)
If you are referring to the .wrapper class then you need to set a max-width in order to follow the rest.
If you are referring to the fact that on top right side you have some empty space is that you have created on grid those areas and they are not being used so instead of
grid-template-areas: "showcase showcase top-box-a" "showcase showcase top-box-b";
grid-template-areas: "showcase showcase" "showcase showcase";
Even tho be more specific which container if not answered your question.
You have to put div.top-box-a and div.top-box-b out of the <header> container because they are now as childs of the <header>. Change your html markdown to this:
<section class="top-container">
<header class="showcase">
<h1>Gaffa Miners</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae nihil consequatur aspernatur distinctio porro
labore!
</p>
Lear More
</header>
<div class="top-box top-box-a">
<h4>My Projects</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, ea!
</p>
Projects
</div>
<div class="top-box top-box-b">
<h4>About Me</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, consectetur.
</p>
About
</div>
</section>
Related
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>
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>
I have a layout of 2 columns. They must have equal heights when rendered side by side (large screen). On mobile they should stack up. I use the old BS grid for this.
The content consists of <ul> among others. In IE11 the lists doesn't stay inside the columns. Instead Col 2s list is rendered on top of Col 1s list.
How can I make each list render and stay inside it's respective column?
How can I skip BS grid and just use flexbox for making columns responsive?
Here's a codepen:
https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1000
Try this:
Note: get rid of extra classes eg: card-block justify-content-center
align-items-center in section tag.
<div class="row justify-content-sm-center">
<div class="col-sm-5">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
<!-- Card content -->
</section>
</div>
<div class="col-sm-5">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card h-100" data-template-id="18">
<!-- Card content -->
</section>
</div>
</div>
Check Demo HERE
Updated
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
<div class="card-text-content mb-auto">
<div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
<h4 class="contract-title">Contract Basic</h4>
<ul class="contract-list">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
</ul>
</div>
<div class="contract-price mt-auto">
<h2 class="component-margin-top-small">205,00 kr./md.</h2>
</div>
<div class="SamCheckbox custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
</section>
Firstly, look this fiddle: http://jsfiddle.net/Uuyp8/5/
I need to create block like block in next image in the <aside> block.
Don't pay attention to russian words. It's not the question.
I can create such block with next html structure:
<aside>
<div class='block'>
<div class='header'><h1>Lorem block 2</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
<div class='block'>
<div class='header'><h1>Lorem block 1</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
</aside>
Questions:
1) is it ok to use new html5 tags like <aside> or <section> with <div> blocks like in my example?
2) how I can create such block only with html5 tags?
3) Do I need to use only html5 tags or it is normal practic to use both html5 tags and old divs?
Divs aren't "old". They still have theire place like <span> and many others.
See here
QUOTE :
“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.
So you don't have to ban them from your web pages and you should still use them like you are.
I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).
Is there a way around this to still have the two columns of text centered?
Edit: Here is a link to what the code looks like: http://www.bootply.com/119539
Here try this Bootply. Is this what you are looking for?
<div class="row">
<div class="col-lg-12">
<h2 class="center-block">How We Work</h2>
</div>
<div class="col-lg-4 col-lg-offset-2">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
</div>
<div class="col-lg-4">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
h2.center-block{
text-align:center;
}
p.text-justify{
max-width:400px;
}
NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.