I'm making some website and got a problem in CSS with header background image.
It doesn't scale to the window size, also problem is the text of the header which isn't in image.
I wanted background image to be full width and height to be in scale of image (in this case image is 16:9) and H3 text to be in the middle of background.
Screenshot of the page
Snippet:
* {
/* outline: 1px dotted salmon; */
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
/*line-height: 1.428571429;*/
color: #333333;
height:100%;
/* width: 100%; */
box-sizing: border-box;
}
#navigacija ul {
width: 100%;
height: 40px;
color: #eceff1;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
#navigacija ul li {
float:right;
}
#navigacija ul li a {
display: block;
text-align: center;
color: #000000;
padding: 16px;
font-size: 14pt;
text-decoration: none;
}
#header {
background-image: url(https://qyq2vq.bn1304.livefilestore.com/y4mO6k4nj7Bn1PdZK3MXxnxTfup6pcZ9CV1RVzElVbaZqHXGeIsWHoA8dYIGLtxGDelO5jpjDbW7viwUNjUp1ptfrIa6Gzl2mtV8gCCEqfiycIHxrC1R0nVr73m_KmhQ2pXgEjhsGtlnkGEpo928QsIRfnQSs-aM4CwxiwaEzJ-q262AQ1Cqau9q_7J1oA9OHSG_pQDOfyHhgSAUpcdz-BdCw/20170104_164033.jpg?psid=1);
background-size: contain;
background-repeat: no-repeat;
line-height: auto;
background-position: 100% 100%;
}
#header h3 {
text-align: center;
font-size: 16pt;
}
p.traka {
text-align: center;
font-size: 12pt;
background-color: #eceff1;
padding: 10px;
}
#zastomi {
width: 100%;
height: 25%;
background-color: #29434e;
}
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script src="https://use.fontawesome.com/e4a38023a1.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<div class="container">-->
<div id="navigacija">
<!-- <a href="/" id="logo" title="ARKomp početna">
ARKomp
<img src="http://www.arkomp.tk/test/content/logo.png" />
</a>-->
<ul style="list-style-type:none">
<li class="klmeni"><span class="navigacija_text">Početna</span></li>
<li class="klmeni"><span class="navigacija_text">Usluge</span></li>
<li class="klmeni"><span class="navigacija_text">Cenovnik</span></li>
<li class="klmeni"><span class="navigacija_text">Kontakt</span></li>
<li class="klmeni"><span class="navigacija_text">O nama</span></li>
<li class="drustvene facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i><span class="navigacija_text">Facebook</span></li>
<li class="drustvene instagram"><i class="fa fa-instagram" aria-hidden="true"></i><span class="navigacija_text">Instagram</span></li>
</ul>
</div>
<div id="sadrzaj">
<div id="header">
<h1>Početna</h1>
</div>
<p class="traka">Zašto mi?</p>
<div id="zastomi">
<div class="kvadrati">
<i class="fa fa-wrench" aria-hidden="true"></i>
<h3>Kvalitet</h3>
<p>Naš posao radimo predano i s ljubavlju. Pazimo na svaki detalj ne bi li udovoljili korisniku.</p>
</div>
<div class="kvadrati">
<i class="fa fa-car" aria-hidden="true"></i>
<h3>Mobilnost</h3>
<p>Trudimo se da vam olakšamo čitav proces nudeći besplatnu uslugu dolaska na kućnu adresu.</p>
</div>
<div class="kvadrati">
<i class="fa fa-money" aria-hidden="true"></i>
<h3>Cena</h3>
<p>U gradu nećete naći servis sa nižim cenama od naših. Pogledajte cenovnik ispod.</p>
</div>
<div class="kvadrati">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<h3>Akcije</h3>
<p>ARKomp svake nedelje nudi još povoljnije svoje usluge u okviru Top ponude!!!</p>
</div>
</div>
<p class="traka">Najnovije:</p>
<div id="najnovije">
<div class="boxovi">
<h4>Top ponuda</h4>
<p>Tokom ove nedelje na sniženju se nalazi usluga instalacije sistema. Nova cena je 1000 dinara.</p>
<div>
<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
<p>14.08.2017 - 20.08.2017</p>
</div>
</div>
<div class="boxovi">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet tempus ex. Vivamus scelerisque. </p>
<div>
<!--<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
<p>14.08.2017 - 20.08.2017</p>-->
</div>
</div>
<div class="boxovi">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet tempus ex. Vivamus scelerisque. </p>
<div>
<!--<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
<p>14.08.2017 - 20.08.2017</p>-->
</div>
</div>
</div>
<div id="footer">
<p>©2017 ARKomp.</p>
<p>Sajt izrađen od ARKomp</p>
</div>
</div>
<!--</div>-->
</body>
</html>
use background-size: cover; to make it fill up the element. background-size: contain; will keep the image in its ratio, in your case the height is only say 60px and there for it will be 60px height and some width. If that makes sense?
#header {
background-image: url(https://qyq2vq.bn1304.livefilestore.com/y4mO6k4nj7Bn1PdZK3MXxnxTfup6pcZ9CV1RVzElVbaZqHXGeIsWHoA8dYIGLtxGDelO5jpjDbW7viwUNjUp1ptfrIa6Gzl2mtV8gCCEqfiycIHxrC1R0nVr73m_KmhQ2pXgEjhsGtlnkGEpo928QsIRfnQSs-aM4CwxiwaEzJ-q262AQ1Cqau9q_7J1oA9OHSG_pQDOfyHhgSAUpcdz-BdCw/20170104_164033.jpg?psid=1);
background-size: cover;
background-repeat: no-repeat;
line-height: auto;
background-position: 100% 100%;
}
Related
This is how my website looks like in desktop view,
And this is how it looks in mobile view,
The Tags looks perfect in Desktop view but in mobile view it is not able to fit all in a single line. That's why, it is jumping to the new line. The tags #pytorch and #tensorflow is in the new line. I want to avoid this behavior. If it is not able to accommodate all in a single line just hide the the rest of all the Tags in the new line (which means to hide #pytorch and #tensorflow).
Minimum Reproducible code:
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
}
.read-more p a span:hover {
color: #0085a1;
}
.title-text:hover {
color: #337ab7;
cursor: pointer;
}
.title-text {
font-family: 'Lato';
font-weight: 700;
font-size: 30px;
color: #404040;
margin-bottom: 10px;
}
.tag p span:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.date {
font-size: 15px;
color: #707070;
margin-left: 15px;
font-family: 'Work Sans';
}
.read {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.author {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.desc p {
font-size: 17px;
font-family: 'Work Sans'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e34c14145.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<h1 class="title-text">Loading Really Large Datasets Efficiently With Generators (Pytorch &
TensorFlow)</h1>
</a>
<div class="post-meta" style="text-align: center;">
<div class="row">
<p class="date"> <i class="fas fa-calendar-week" aria-hidden="true"></i> Posted On
May 5, 2022 |</p>
<p class="read"> <i class="fas fa-clock" aria-hidden="true"></i><span
class="span_read"> 10 minutes</span></p>
</div>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
<div class="read-more" style="float: right;">
<p style="font-family: 'Open Sans'; font-weight: 700; font-size: 18px;"><a
href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none; color: black;"><span>[Read
More]</span></a></p>
</div>
<div class="row" style="padding-top: 1px; overflow: hidden;">
<p style="font-family: 'Open Sans'; font-size: 1rem">Tags:</p>
<!-- THIS IS WHERE PROBLEM STARTS -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('data')">
<span>#data</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('pytorch')">
<span>#pytorch</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('tensorflow')">
<span>#tensorflow</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see, the div has very short width so the Sample 3 and Sample 4 has automatically came down. I want to avoid this behavior and want to hide Sample 3 and Sample 4. So, the desired output should looks like this:
Thanks for your time.
The problem is that the readme block has a float right outside the row, while the row itself has no width. You can add an col-md-12 class within the row to force a full width tag list, but that will push the read more outside.
While I would go for a manually written CSS Flexbox based solution for this problem, with bootstrap you can do something like this:
<div class="row">
<div class="col-md-auto order-md-12">
read more here
</div>
<div class="col-md-auto order-md-1">
tags here
</div>
</div>
This will render read more and tags next to each other on medium and larger displays, and order read more at the very end.
On smaller displays, cols are full width with read more positioned before the tags.
I copied your example where I applied it.
It is not perfect, but getting there. I would advise you however to look at what elements you use. Tags have meaning in HTML; divs are pretty much meaningless. For links, use the <a>-element, not an onclick handler, for lists use <ul><li>; and definitely use <divs> with <p>'s wrapped in it per tag. If you want to take the easy route, a simple list of <a>'s would probably be sufficient for the tags.
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
}
.read-more p a span:hover {
color: #0085a1;
}
.title-text:hover {
color: #337ab7;
cursor: pointer;
}
.title-text {
font-family: 'Lato';
font-weight: 700;
font-size: 30px;
color: #404040;
margin-bottom: 10px;
}
.tag p span:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.date {
font-size: 15px;
color: #707070;
margin-left: 15px;
font-family: 'Work Sans';
}
.read {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.author {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.desc p {
font-size: 17px;
font-family: 'Work Sans'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e34c14145.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<h1 class="title-text">Loading Really Large Datasets Efficiently With Generators (Pytorch &
TensorFlow)</h1>
</a>
<div class="post-meta" style="text-align: center;">
<div class="row">
<p class="date"> <i class="fas fa-calendar-week" aria-hidden="true"></i> Posted On
May 5, 2022 |</p>
<p class="read"> <i class="fas fa-clock" aria-hidden="true"></i><span
class="span_read"> 10 minutes</span></p>
</div>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
<div class="row" style="">
<div class="col-md-4 order-md-12">
<div class="read-more" style="float: right;">
<p style="font-family: 'Open Sans'; font-weight: 700; font-size: 18px;"><a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow" style="text-decoration: none; color: black;"><span>[Read
More]</span></a></p>
</div>
</div>
<div class="col-md-8 order-md-1">
<div class="col row"> <p style="font-family: 'Open Sans'; font-size: 1rem">Tags:</p>
<!-- THIS IS WHERE PROBLEM STARTS -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('data')">
<span>#data</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('pytorch')">
<span>#pytorch</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('tensorflow')">
<span>#tensorflow</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want my items to be placed in a specific order, so that the title (The header with the copyright paragraph) to be centered in the middle of the page my About section to not fill up half of my page ... I've tried using flex-basis so that I can give every item a specific width but didn't seem to work, any ideas? Here is the code for the footer part, I have this problem for both navbar and footer, but I guess if it will work for one it will work in general
Also PM : I don't know why most of the html code dosen't show with snippet , here is an image of how it looks https://imgur.com/4xXP36C
HTML CODE :
.flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.container {
max-width: auto;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.footer .box a{
margin: 0 5px;
}
.lead {
font-size: 20px;
}
.py-1 {
padding: 1rem 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<footer class="footer bg-dark ">
<div class="container flex lead py-1">
<div class="box">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
</div>
<div class="box">
<h1>CarolandHousing</h1>
<p>Copyright © 2021</p>
</div>
<div class="box">
<nav>
<ul>
<li>Home</li>
<li>Features</li>
<li>Docs</li>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</ul>
</nav>
</div>
</div>
</footer>
Working Domo
Please find below the updated code according to your requirements which are as follows:-
All three columns in flex take equal width (33%)
Optional: Links removing list style and right align for better UI
.flex {
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.container {
max-width: auto;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.flex-basis-3{
flex-basis: 33%
}
.text-center{
text-align: center
}
.text-right{
text-align: right
}
.no-list{
list-style: none;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #000;
}
.footer .box a{
margin: 0;
}
.lead {
font-size: 20px;
}
.py-1 {
padding: 1rem 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<footer class="footer bg-dark ">
<div class="container-fluid flex lead py-1">
<div class="box flex-basis-3">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
</div>
<div class="box flex-basis-3 text-center">
<h1>CarolandHousing</h1>
<p>Copyright © 2021</p>
</div>
<div class="box flex-basis-3 text-right">
<div class="display: flex; justify-content: flex-end">
<span>Home</span>
<span>Features</span>
<span>Docs</span>
</div>
<div>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</div>
</footer>
The content of the testimonial page keeps acting funny each time I try to centralise it on the page. I have tried setting the margin of the .content to 25% auto; but each time I try to tweak the background image becomes so large and still does not centralise.
I also have this bug on my home page where the background image shrinks and shows some white space cant seem to figure the problem
THE HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" name="" content="">
<meta property="og:url" name="" content="">
<meta property="og:image" name="" content="">
<meta property="og:type" name="" content="">
<meta property="og:keywords" name="" content="">
<meta property="og:description" name="description"
content="No 1,Hospitality management and luxury company in New York USA.We offer our expertise with love in Event Planning and Production, Restaurant sales and consulting and Memorial and Funeral Services.">
<title>Hill and Boyd - Home Page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<!-- HOME PAGE CONTENT-->
<div class="hb-page">
<section id="navigation">
<header>
<div class="mobile">
<a class="js-nav.toggle hb-nav-toggle" onclick="open">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</a>
</div>
</header>
<div class="navbar whitebg" id="navbar">
<aside id="hb-aside">
<nav id="menu" class="centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</nav>
</aside>
</div>
</section>
<section class="home-page">
<div id="main">
<aside id="home-page" class="">
<div class="slideshow-container">
<div class="home-page-slides">
<img class="" src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt">Luxury Events</h6>
<h2 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt omnis quod iste temporibus suscipit nostrum asperiores voluptatem. Provident maiores qui officia tempore, eos veritatis, obcaecati!</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Creating Impact</h6>
<h2 class="blacktxt"> WE PROVIDE STRATEGY TO BOOST SALES</h2>
<p class="greytxt fontlight">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi minima, cumque dicta, minus, sit, praesentium officia deleniti beatae necessitatibus sequi tempora totam ut impedit dolores.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Lasting Memories</h6>
<h2 class="blacktxt ">WE SERVE YOU WITH LOVE</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum nam sequi dolorum similique praesentium, necessitatibus, aspernatur expedita sed natus illum ut, vitae! Possimus, tempore, facere!</p>
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<section id="testimonials">
<div class="testimonials">
<a name="testimonials"></a>
<h6 class="goldtxt whitebg">what people are saying...</h6>
<h1 class="blacktxt fontlight whitebg">TESTIMONIALS</h1>
<div class=“testimonial-slider">
<div class="testimonial-slide current">
<div class="content">
<h1>Antonio & Anica </h1>
<p class="greytxt fontlight">
"Antonio and I could never repay you for your contribution to our wedding.As you know,for most women,it is one of the most momentous occasions in their lifetime and that was certainly the case for me.<br />From the beginning,you
knew how important that day would be for me and you added such unique elements of class and style.<br />You truly made our experience much better than what I had imagined it would be."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Mrs Beasley </h1>
<p class="greytxt fontlight">
"Dina is the best! The restaurant and dining room are chic and modern.
The staff and owner are incredibly professional and warm.<br /> <br />
Dina really helped us make our wedding reception and cocktail hour uniquely ours."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Bride Review</h1>
<p class="greytxt fontlight">
“ I feel incredibly honored to have worked with Dina! When my husband and I reflect on our wedding day,
our biggest regret is not having met Dina sooner.<br /> <br />
We can't wait to start planning a vow renewal celebration,
so that we can have her plan the entire thing!!!"<br />
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</section>
THE CSS CODE
h1 {
font-family: 'Nunito Sans', sans-serif;
margin: 0;
font-size: 30px;
}
h2 {
font-family: 'Nunito Sans', sans-serif;
margin: 0;
text-transform: uppercase;
font-size: 17px;
}
h6 {
font-family: 'TuesdayNight';
margin: 0;
font-size: 30px;
}
p {
font-family: 'Nunito Sans', sans-serif;
font-size: 15px;
}
#media screen and (min-device-width : 250px) and (max-width: 850px) {
h1 {
font-size: 15px;
}
h2 {
font-size: 14px;
margin: 0;
}
h6 {
font-size: 25px;
}
p {
font-size: 13px;
}
}
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container, .main {
width: calc(100%-300px);
width:100%;
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 50px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page-slides img {
height: 100%;
min-height: 100%;
width: 100%;
object-fit: cover;
}
#media screen and (min-device-width : 280px) and (max-width: 850px) {
html, body {
overflow-x: hidden;
}
.desc-container {
float: right;
position: absolute;
margin: 10%;
margin-bottom: -5%;
}
.desc {
width: 75%;
height: 25%;
position: relative;
}
.home-page-slides img {
object-fit: cover;
}
}
/*----------------------------------------------------
#Testimonial Page
-----------------------------------------------------*/
.testimonials {
height:100%;
width:100%;
background-image: url(../Images/eventbg7.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.testimonial-slider {
width:100%;
}
.testimonial-slide {
width:calc(100%-300px);
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.testimonial-slide.current {
opacity: 1;
}
.testimonial-slide .content {
width:calc(100%-300px);
height: 100%;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
padding: 35px;
}
.testimonial-slide .content{
opacity: 1;
}
.testimonial-slide .content h1 {
}
.testimonial-slide .content {
opacity: 1;
/* transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s; */
}
.buttons button#next {
}
.buttons button#prev {
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
cursor: pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
I have made a simple address panel where i have made three panels of each consisting of address,phone number and email.Each panels consist of an icon and an paragraph besides it.I have use vertical align:top and display table property to align them side by side.Then i have given a border-left property to the main div that consist all this divs inside of it.I want to have a design such that the line should go through the icons and and not exceed the top and bottom icon.But the problem is happening here where the main consist all these icons and there are some padding and margin, hence it is crossing over and can't fix it even when i remove margin and padding.I want to have a design such that the icons shouldn't exceed top and bottom icons.And if anyone is suggesting position property,just keep in mind i have a div inside another col-md-6 which has a position absolute.
Here is the HTML part:-
<div class="row">
<div class="col-md-6 col-sm-12">
<h2 class="heading-title">Drop in our office</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="address-top">
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>ADDRESS</label>
<p>Huatai Securities (USA)10 Hudson Yards 41FlNY, NY 10001</p>
</div>
</div>
</div>
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>LETS TALK</label>
<p>212-763-8166</p>
</div>
</div>
</div>
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>GENERAL SUPPORT</label>
<p>boardoffice#htsc.com</p>
</div>
</div>
</div>
</div>
</div>
Here is the CSS part:-
.address-left, .address-right{
vertical-align: top;
height: 100%;
display: table-cell;
}
.address-left{
width:50px;
box-sizing: border-box;
padding: 20px 0 0 0;
}
.address-right{
width: 200px;
max-width: 100%;
box-sizing: border-box;
padding: 25px 0 0 0;
}
.address-repeat{
width: 100%;
margin: 20px 0 0 -12px;
}
.address-top{
width: 100%;
border-left:2px solid #d5d5d5;
margin: 20px 0 0 10px;
}
#contact-us .address-right p{
color:#5e5e5e;
font-family: 'Montserrat-Regular';
padding: 0;
margin: 0;
letter-spacing: 0.5px;
font-size:14px;
width:200px;
font-weight: lighter;
}
#contact-us label{
font-family: 'HelveticaNeueLTStd-HvCn';
font-size:17px;
color:#343434;
}
#contact-us i{
color:#ffffff;
font-size: 15px;
border-radius:50%;
width:25px;
height:25px;
line-height:23px;
padding:1px 0 0 6px;
background-color:#e70020;
}
You can use ::before pseudo element instead of left-border like this:
.address-left, .address-right{
vertical-align: top;
height: 100%;
display: table-cell;
}
.address-left{
width:50px;
box-sizing: border-box;
padding: 20px 0 0 0;
}
.address-right{
width: 200px;
max-width: 100%;
box-sizing: border-box;
padding: 25px 0 0 0;
}
.address-repeat{
width: 100%;
margin: 20px 0 0 -12px;
}
.address-top{
width: 100%;
margin: 20px 0 0 10px;
position:relative;
}
.address-top::before {
position: absolute;
left: 0;
top: 25px;
height: calc(100% - 50px);
width: 2px;
content: '';
background-color: #d5d5d5;
z-index: -1;
}
#contact-us .address-right p{
color:#5e5e5e;
font-family: 'Montserrat-Regular';
padding: 0;
margin: 0;
letter-spacing: 0.5px;
font-size:14px;
width:200px;
font-weight: lighter;
}
#contact-us label{
font-family: 'HelveticaNeueLTStd-HvCn';
font-size:17px;
color:#343434;
}
#contact-us i{
color:#ffffff;
font-size: 15px;
border-radius:50%;
width:25px;
height:25px;
line-height:23px;
padding:1px 0 0 6px;
background-color:#e70020;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<h2 class="heading-title">Drop in our office</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="address-top">
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>ADDRESS</label>
<p>Huatai Securities (USA)10 Hudson Yards 41FlNY, NY 10001</p>
</div>
</div>
</div>
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>LETS TALK</label>
<p>212-763-8166</p>
</div>
</div>
</div>
<div class="address-repeat">
<div class="address-left">
<div class="body-widget">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
<div class="address-right">
<div class="body-widget">
<label>GENERAL SUPPORT</label>
<p>boardoffice#htsc.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
The green textbox on the jsfiddle wont move upwards to the yellow one.. how do i fix this? And how do i make the boxes "unsizable", so they wont start going everywhere when the window gets resizded.
I think it has to do with the middle div, because when i type more in it, the side boxes goes down.
I tried: top: -20px;, and position: alternative / realative; But they just dissapear
I can´t add the link to the jsfiddle.. it should be in the comments.
.container {
max-width: 770px;
margin: auto;
margin-top: 15px;
overflow: hidden;
}
.left, .right, .middle {
float: left;
overflow: hidden;
border-radius: 3px;
margin-right: 10px;
position: initial;
}
.right {
margin-right: 0px;
float:right;
position: initial;
}
.left-header, .right-header, .middle-header {
background: #58C5B3;
font-size: 10px;
padding: 15px;
color: #FFFFFF;
text-transform: uppercase;
position: initial;
}
.middle{
width: 500px;
position: initial;
}
.left-text, .right-text, .middle-text {
background: #FFFFFF;
padding: 5px;
font-size: 15px;
position: initial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#55A7DB;
color:black;
line-height:22px;
margin-left:auto;
margin-right: auto;
text-align:center;
vertical-align:middle;
border-radius: .2em;
width: 780px;
height: 42px;
border-right: .2em;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 010px 16px;
text-decoration: none;
font-size: 10px;
}
li a:hover {
background-color: #58c5b3;
margin: 0;
color:#fff;}
a:link {
color: white;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
a:hover {
color: #ffffff;
}
a:visited {
color: white;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
.design{
padding: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
background-color: #ffffff;
border: 1px solid #c2c2c2;
border-radius: 5px;
position: relative;
}
.pluss{color:#7dc3b7;}
.minus{color:#c5618b;}
.space{height:20px;}
<body>
<div class="container">
<ul>
<li> <a href="#"><i class="fa fa-home" aria-hidden="true"></i>
HOME</a></li>
<li> <a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>
NEWS</a></li>
<li> <a href="#"><i class="fa fa-users" aria-hidden="true"></i>
ADMINS</a></li>
<li style="float:right"> <a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>
LOGIN</a></li></ul>
<br>
<!-- LEFT -->
<div class="left" style="width: 25%">
<div class="left-header">
updates<i style="float:right;" class="fa fa-refresh fa-lg" aria-hidden="true"></i>
</div>
<div class="left-text">
<!-- -->
<div class="minus"></div>
<div class="pluss">+ Added:<br>+ Added:<br><div class="minus">- Removed:<br>- Removed</div></div>
</div>
</div>
<!-- /// left-->
<!-- MIDDLE -->
<div class="middle" style="width: 47%">
<div class="middle-header" style="background-color: #ce5b5b">
Welcome to (servername)!<i style="float:right;" class="fa fa-home fa-lg" aria-hidden="true"></i>
</div>
<div class="middle-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<!-- /// middle-->
<!-- RIGHT -->
<div class="right" style="width: 25%;">
<div class="right-header" style="background-color: #e3c155 ">
login<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="right-text">
<!-- -->You can have your own text in this box.
</div>
</div>
<br><p>
<!-- ///right-->
<!-- left- secound row -->
<div class="left" style="width: 25%;">
<div class="left-header" style="background-color: #55A7DB">
INSERT TEXT<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="left-text">
<!-- -->You can have your own text in this box.
</div>
</div>
<!-- ///left -seound row-->
<!-- RIGHT - secound row -->
<div class="right" style="width: 25%;">
<div class="right-header" style="background-color: # ">
insert text<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="right-text">
<!-- --> THIS TEXTBOX, (LIKE EVERYONE) WONT GO TO THE TOP, UNDER THE YELLOW ONE.
</div>
</div>
<br><p>
<!-- ///right - secound row-->
</body>
Try to put all left divs inside one left container and the same for middle and right, when you do this, all boxes will show just below each other without spaces in between as in your fiddle.
And if you want to prevent them from resizing, you will have to give them a fixed width not percentages, or percentages with max-width:xxpx;