I'm trying to fix 2 issues:
The images on the left (sideImage) won't vertically align with the text box when I scale the window down horizontally. I've tried using margin-top auto and margin-bottom auto but that doesn't seem to work to well.
The top div would disappear on top when I scale down the window vertically. (I have no idea why that happened)
I'm using Bootstrap btw, so pls do keep that in mind.
/*-- CSS --*/
* {
background-color: rgba(0, 0, 0, 0.1);
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
.page2Box {
float: left;
display: inline-block;
clear: both;
}
.sideImage {
margin-top: auto !important;
margin-bottom: auto !important;
}
.mainImage {
float: right;
margin-top: auto !important;
margin-bottom: auto !important;
}
p {
height: 180px !important;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Page2_Bootstrap</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bigBox col-md-8">
<div class="container page2Box col-md-12" id="box1">
<h2 class="col-md-5">Main Goal</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
<div class="container page2Box col-md-4" <div class="container page2Box col-md-12" id="box2">
<img class="image-responsive sideImage col-md-4" src="placeholder.png">
<h2 class="col-md-5">Who We Are</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
<div class="container page2Box col-md-12" id="box3">
<img class="image-responsive sideImage col-md-4" src="placeholder.png">
<h2 class="col-md-5">What We Do</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
</div>
<image class="image-responsive col-md-4 mainImage" src="placeholder.png">
</body>
</html>
This is how it looks like.
Here are the problems.
I would suggest using the flex-box option while nesting the image and text in separate divs. I.E.
HTML:
<div class="container">
<div class="row equal">
<div class="col-md-6 col-sm-6">
<div class="box">
<img class="image-responsive" src="http://via.placeholder.com/350x150" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="box">
<h2>Main Goal</h2>
<p>In iaculis elit id odio malesuada, vitae euismod dui viverra. Maecenas pulvinar quis magna in dapibus. Ut eget elit eget nibh eleifend ultricies a a orci. Aliquam tristique nulla eu sapien posuere egestas. </p>
</div>
</div>
</div>
</div>
CSS:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
border: 1px solid #333;
}
JSFiddle: https://jsfiddle.net/Jabideau/rkzafmrb/
Related
I am working on a website. I am a little rusty when it comes to CSS. I am trying to get the same effect as this page https://prp.fm/. I want the header to be over the hero section with a transparent background. The header does not need to be sticky, but I am unable to get the header to overlay over the header.
I tried adding background-attachment:fixed in the .hero-section CSS, but it would just fix the image to the page and not scroll with the page. That I do NOT want. I want the hero section to be behind the header and scroll with the page.
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
Just reduce an opacity on the header and increase the font-weight of the contents which are in the header like the following
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
opacity: .3; /* added */
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
I'm trying to align content in a flex box centered (vertical and horizontal). In my example it works as long the screen is big enough.
Problems:
When the content is bigger than 100vh in the ".wrapper" class. The content will be cut of at the top.
When i set the ".wrapper" to "100vh" and I add the ".header" div, this div should be excluded from the "100vh" otherwise i will get a scrollbar for nothing.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<meta name="infoription" content="">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f8f9fa;
font-family: Roboto,Helvetica,Arial,Lucida,sans-serif;
color: #55595c;
}
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
flex-wrap: wrap;
}
.content {
background-color: #ffffff;
max-height: 350px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
margin: 10px;
position: relative;
border: 1px solid #dfdfdf;
border-radius: 0.25rem;
}
.content:after {
/* background: none repeat scroll 0 0 transparent; */
bottom: 0;
content: "";
display: block;
height: 10px;
left: 50%;
position: absolute;
background: #55595c;
transition: width 0.4s ease 0s, left 0.4s ease 0s;
width: 0;
}
.content:hover:after {
width: 100%;
left: 0;
}
.thumb {
background-color: #55595c;
height: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.info {
padding: 10px;
text-align: justify;
}
/* Responsive layout - screen is bigger than 1000px wide */
#media (min-width: 1000px) {
.bodysize {
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="bodysize">
<div class="header">
<h1>Example Page</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[1]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[2]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[3]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[4]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[5]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[6]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[7]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[8]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[9]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Example pictures:
Problem 1 - scrollbar because of "height: 100vh;".
Problem 2 - content floating out of the browser top. also because of "height: 100vh;".
Questions:
1) How can I set a dynamic height so the wrapper always fills the rest of the available space?
2) If the content is smaller than than the wrapper height it should be centered vertical but if the content is bigger, there is not center needed.
Any ideas how I can fix this?
>>> SOLUTION <<<
I added the .bodysize, removed the height from the wrapper and added "flex-grow: 1" to the wrapper. .bodysize { display: flex; flex-flow: column; height: 100vh; }
Try to set height: auto; and max-height: 100vh; at your wrapper.
Otherwise, your wrapper always would have 100% height even having few elements inside. The scrollbar would should appear when the content exceeds 100vh.
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: auto;
max-height: 100vh;
flex-wrap: wrap;
}
I'm struggling to align a group of boxes in the center of my webpage when displayed on a computer screen. I'm floating the boxes left but then it's assymetrical with more space on the right. It's currently looking like this:
! https://imgur.com/a/wq0yv6S
I tried a few different alignment properties to the "boxes" and "box" classes but they didn't accomplish anything.
HTML of the section + first box and CSS:
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
width: 20%;
padding: 10px;
text-align: center;
align-self: center;
justify-content: space-around;
}
#boxes .box img {
width: 200px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
I'd like to have those boxes positioned symmetrically.
You can use display: grid;
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid-item {
background: #F7F7F7;
padding: 1em;
text-align: center;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
You could use flexbox,
it's very easy to start with,
you need to implement this CSS code to the parent container which you need its children to be aligned in someway
.container{
display: flex;
justify-content: center;
align-items: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
What you're trying to achieve is not too hard with flexbox. See the following demo for an example. If you have any questions please ask :).
Note: The .site div is not needed but added for reference.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 960px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.box {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.site {
border: 1px solid red;
}
img {
max-width: 100%;
height: auto;
}
<div class="site">
<div class="container">
<div class="row">
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
</div>
</div>
</div>
I need help with an invisible/inexplicable space gap in my webpage, in the screen screenshots below you can see the space (the red area):
I need that they behavior just like the other row below "LMP" and "LMB"
In Safari the space gap is not present, but in chrome and firefox this space appears, ain honestly I don't kow what to do, i detected that the container class with a width:80% desapears the gap, but then the page becomes too thin.
Here is a
JSfiddle
IF anyone has the same problem, above the titles I have a header, in this I missed a /div so the next row was complete crazy...thanks to all for helping me, i really apreciate the help
You need to make <div class="row">
before any col-md/col-lg/col-sm Because Bootstrap keep 15px Padding for this.
Update jsfiddle solution:
Update solution in codepen Link
And Update Snipper
/***** 3.- NEWS AND CONTENT *******/
.news-section {
background-color: #F1EFEF;
height: 1500px;
}
.black-title {
margin-top: 50px;
height: 60px;
width:112%;
margin-left: -15px;
background-color: #4A90E2;
text-align: center;
line-height: 60px;
}
.black-title > h3 {
vertical-align: middle;
}
.white-title {
margin-top: 50px;
height: 60px;
margin-left: -15px;
background-color: #3F444A;
color: #fff;
text-align: center;
line-height: 60px;
}
.white-title > h3 {
vertical-align: middle;
}
.title-section-2 {
margin-top:0px;
height: 100%;
}
.news-content {
margin-top: 25px;
display: block;
}
.news-content img {
margin:auto;
background-color: #F1EFEF;
}
.news-link {
text-align: right;
margin: 10px;
}
.news-link a {
color: #E7BF3A;
text-decoration: none;
}
.spot-horizontal {
height: 90px;
margin-top: 10px;
background-color: #BD10E0;
}
.logos-horizontal {
height: 50px;
background-color: #3F444A;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="news-section">
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class=" black-title">Lo más nuevo</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class="white-title">Videos más nuevos</h3>
<div class="news-content">
<img class="img-responsive" src="http://placehold.it/500x400" alt="" >
</div>
</div>
</div>
<div class="col-md-12 spot-horizontal">
<div class="row">
<h3 class="title-black">PUBLICIDAD</h3>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class=" black-title title-section-2">LMB</h3>
<div class="news-content">
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<div class="news-link">
Más Noticias
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<h3 class="white-title title-section-2">LMP</h3>
<div class="news-content">
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<h4>Titulo de noticia</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie aliquet tristique. Proin aliquam neque quis est sagittis, tempus sagittis tortor mattis. Praesent nec gravida.</p>
<div class="news-link">
Más Noticias
</div>
</div>
</div>
</div>
<div class="col-md-12 logos-horizontal">
<div class="row">
<h3 class="white-title title-section-2">LOGOS</h3>
</div>
</div>
</div>
</div>
</div>
</section>
Both divs have to be inline-block and have the same parent.
Here's a fiddle: https://jsfiddle.net/fbrh1464/6
I'm trying to build a simple web page and I need an image to be positioned on the left of the container. Ideally I'd like to make sure the image resize nicely when the browser window is resized but still keeps its position independently from the text. What I'm trying to achieve looks something like this:
The text part is inside the Bootstrap container CSS class. Not sure how to achieve the look I need - tried a few things with image being inside a wrapper with absolute position on the same level as the container div, but then I can't seem to center the image inside the wrapper (vertically).
This is what I have so far:
.header {
background-color: #333333;
}
.logo-wrapper {
position: absolute;
}
.logo {
position: relative;
/* padding-top: 50%; */
height: 100%;
}
<div class="header">
<div class="logo-wrapper">
<img src="assets/logo.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>
.logo-wrapper {
width: 20%;
display: table-cell;
vertical-align: middle;
}
.logo-wrapper img{
max-width:100%
}
.container{
width:80%;
display: table-cell;
}
<div class="header">
<div class="logo-wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/03/04/22/35/head-659652_640.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>
.header {
background-color: #333333;
line-height:1.5em;
display:inline;
}
.container{
float:right;
width:70%;
padding-left:10%;
}
.logo-wrapper {
float:left;
width:20%;
}
.logo-wrapper img{
max-width:100%
}
}
.logo {
position: relative;
/* padding-top: 50%; */
height: 100%;
}
<div class="header">
<div class="logo-wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/03/04/22/35/head-659652_640.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>
I think the answer of #Mitul is correct. But there's a slight modification in the solution of Mitul. If you want no text below the image, you should modify it like.