I have a design which I am following to create my front end. I am having difficulty in spacing the divs.
My design looks like:
I am trying to create the same in angular
code
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px" class="side_start">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="12px">
<div ngClass=third_bar_1>
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px">
<div fxFlex="8" class="zone">
Zone Thermal Comfort
</div>
<div fxFlex="5" class="temp">
<p>TEMP</p>
<p>37 deg</p>
</div>
</div>
</div>
<div class=third_bar_2>
second
</div>
</div>
</div>
.css
.third_bar_1{
border:1px solid red;
background-color: white;
height: 60px;
}
.zone {
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
}
.temp {
background-color: #73d9fa
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 355px);
}
and it looks like:
how to create the divs as shown in the image with different divs horizontally and vertically.
If you are trying to do that using pure css that would be a bit difficult. You can do it using bootstrap which is css frmaework very easily. Just read some tutorials about bootstrap grid system you will be able to do this easily. Here is an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</body>
</html>
You need to use flexbox to align it with the desired design.
You need first write the markup keepin in mind the flexbox.
body{
margin:0px;
}
.menu {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #efefef;
}
.menu .left {
display: flex;
align-items: center;
}
.menu .left .left-left{
display: flex;
align-items: center;
}
<div class="menu">
<div class="left">
<div class="left-left">
<div class="first">
<p>Zonal thermal Comfort</p>
</div>
<div class="second">
<div class="up">
<p>Temp</p>
</div>
<div class="down">
<p>37 Deg</p>
</div>
</div>
<div class="fourth">
<p>48</p>
</div>
</div>
<div class="left-right">
<img src="https://via.placeholder.com/93x45" alt="">
</div>
</div>
<div class="right">
<p>otherstuff</p>
</div>
</div>
<div class="menu">
</div>
Now this is a very basic implementation of flexbox. The properties that you require to implement this design are
align-items : This will align you align items vertically
justify-content : This will align you align items horizontally
flex-direction : This will change your main-axis from horizontal to vertical according to the value
Read flexbox in detail, in will help you develop 1-D layouts. enter link description here
Related
So, I created this resume using HTML and CSS and I wanted to it responsive in a way that if I change the browser size, the contents including the container will adjust. I'm new to this so I'm not sure.
This is how it looks when I change the size of my browser. As you can see, the contents and container become messy
#import url('https://fonts.googleapis.com/css2?family=Catamaran:wght#400;500;600;700;800;900&display=swap');
body
{
background: #f0966b;
font-family: 'Catamaran', sans-serif;
margin: 30px 250px;
}
.name
{
font-size: 35px;
font-weight: 800;
}
.container
{
display: grid;
padding: 30px;
grid-column-gap: 1em;
grid-row-gap: 1em;
background-color: #f8f8f8;
max-width: 100%;
min-height: 100px;
}
.header
{min-height: 100px;
display: grid;
grid-template-columns: 70% 30%;
}
.subheader
{
font-size: 19px;
font-weight: 700;
}
.left-right
{
display: grid;
grid-template-columns: 50% 50%;
margin-top: 25px;
}
.footer
{
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 1px;
grid-column-gap: 2em;
}
span
{
font-weight: 600;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./sample.css">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<p class="name">
Hello. <br>
I'm <span style="color: #e9692c; ">
Name Surname.
</span>
</p>
<img src="https://i.pinimg.com/1200x/ec/de/63/ecde631ccc34c9b8086dbf7956f88eae.jpg" width="200" height="auto">
</div>
<div>
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.
</div>
<div class="left-right">
<div>
<div class="subheader">
Skills
<div>━</div>
</div>
<div>
● Graphic Design<br>
● Web Design<br>
● Web Development<br>
● Adobe Illustrator<br>
● Adobe Photoshop<br></div>
</div>
<div>
<div class="subheader">
<div class="exp">
Experience
<div>━</div>
</div></div>
<div>
<strong>2xxx-PRESENT</strong> <br>
<span style="color: #e9692c;">POSITION</span><br>
<span>COMPANY INC.</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div><br>
<div class="subheader">
Education
<div>━</div>
</div>
<div>2xxx-2xxx | M.A <br>
<span style="color: #e9692c;">FRONT-END <br></span>
University</div><br>
<div>2xxx-2xxx | B.S <br>
<span style="color: #e9692c;">INFORMATION TECHNOLOGY <br></span>
University</div>
</div>
<div>
<div class="subheader"><br>
Works
<div>━</div>
</div>
<div>
Sprite Animation using HTML & CSS<br>
Blog Site
</div>
</div>
<div><br>
<div class="subheader">
Hobbies & Interests
<div>━</div>
</div>
<div>
Web Design <br>
Digital Illustration <br>
Animation <br>
Video Editing <br>
Programming <br>
</div>
</div>
</div>
<div><hr></div>
<div class="footer">
<div>email</div>
<div>contact no.</div>
<div>linkedin</div>
</div>
</body>
</html>
</body>
</html>
The issue is body margin size. Make that margin as %
body{margin: 30px 250px;}
body{margin: 30px 2%;} //Use This
I have this set up on desktop with a headline on the left and an image on the right. When I collapse the browser less than 880px, I want the image to be centered underneath the headline.
I am struggling with getting the image centered & underneath the headline.
I am fairly new to html/css so any tips would be greatly appreciated.
Fiddle: https://jsfiddle.net/o7k5qgne/1/
<section class="hero">
<div class="hero-inner">
<h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
</div>
<div class="split split-right">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
</section>
<div class="clients">
<h2>Lorem ipsum dolor & sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit
</p>
</div>
Try using CSS media Query to detect where (breakpoint) you want the DIVs to stack. See the example below and adjust as needed.
.myDiv {
height: 150px;
width: 150px;
display: inline-block;
background-color: orange;
margin-bottom: 25px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */
#media screen and (max-width: 320px) {
.myDiv {
width: 90%;
display: block; /* Stops it from floating */
margin: auto; /* Ensures that it is centered */
margin-bottom: 25px; /* Space between the stacked elements */
}
}
<div class="myDiv"></div>
<div class="myDiv"></div>
More on CSS Media Query
See it here in action. Resize the browser to see how it works.
Problem is with your css. Here I edited your css just to the once that need to make the image and headline responsive.
[https://jsfiddle.net/ss123/a7q834sL/1/][1]
Styling like you are expecting can simply be achieved by using css flex box. To do that you must first put the content inside a container and make it display:flex. Then you can use the flex styling for the content inside the container.
flex-direction:column will stack the content over. flex-direction:row will put the content in a single row. jstify-content:space-venly will justify the content elements with exactly even spaces between them.
You are on the right track here with the media queries you have in place. I would avoid using the absolute positioning on the image, it will get set exactly where you tell it to and not be very flexible. Centering can be done in several ways like with flex box as others have mentioned, or even just throwing a text-align: center on its' parent element. With your media queries on mobile, be weary of padding or vh/vw that you have in place from desktop, you may not want those still in place when you get to a small screen size; looks like in your example you would want to remove padding and the vh on mobile. Also, to help your CSS be a bit easier to manage I would recommend putting your media queries right inside the class to avoid repeating a lot of code, like so:
.hero-inner {
/* Flexbox Stuff */
display: flex;
align-items: center;
/* Text styles */
text-align: left;
width: 50px;
#media only screen and (max-width: 880px) {
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit
</p>
</div>
</div>
</body>
</html>
I am creating a portfolio page. I am using Bulma. The thing I want is to place the background image and text inline.
Here's the code:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</section>
The thing I want is background image shifted at right in <div class = "container">. However it gets cropped. I messed up with height and width of the container. This affected the text inside the container i.e. it was not vertically centered anymore. Please help.
I want to achieve this:
I tried:
<section class="hero is-halfheight upload-descr section" style = "height: 37em">
<div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</section>
I achieved the thing I wanted after trying above code. However, on decreasing viewport size, background image and text appears on above other maybe they got vertical and horizontal centered. Please help me. How can I place background image and text next to each other without any bugs?
Here's the bug:
Idea
Left side text and right side the image
Give all the same background color
Example
(The image ratio is about 4:3. Change CSS according to your needs.)
.mySection {
background-color: #F93122;
color: white;
border: 1px solid white;
}
.myHero {
padding: 50px 0 50px 75px;
}
.myHero .hr {
display: inline-block;
width: 100px;
height: 15px;
background: white;
border-radius: 20px;
margin-bottom: 15px;
}
.myHero h1 {
font-size: 50px
}
#media(max-width: 768px) {
.myHero {
padding: 50px !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="mySection">
<div class="columns is-vcentered">
<div class="column is-5-tablet is-5-desktop">
<div class="myHero">
<div class="hr"></div>
<h1>Loren Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta a et ipsa voluptates in velit rem minus nihil, blanditiis nisi, quidem tempore quos qui quas. Blanditiis hic dolorem fugiat? Blanditiis!</p>
</div>
</div>
<div class="column is-7-tablet is-7-desktop">
<figure class="image is4by3">
<img src="http://i64.tinypic.com/29gedzq.png">
</figure>
</div>
</div>
</section>
Hint
Bulma#image
You used two times container class as per my thought that is why you getting this bug. Are you want change background color red to and img ?
This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed 5 years ago.
I am working on a web application and I am trying to keep my footer with text at the very bottom of the page.
I don't want it to move at all, just to always be at the bottom of the page, no matter the size of the page. As of right now, it works great with most browsers, but once I switch to mobile, it moves to the side of the side of the page.
How would I keep it at bottom for mobile as well?
Thanks!
<html>
<body>
<footer>
<div class="container" style="position:absolute; bottom:0px; left:520px;">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
You can use sticky footer located here https://getbootstrap.com/examples/sticky-footer/ or at https://codepen.io/elmahdim/pen/Djlax. In addition you can also use navbar-fixed-bottom
USING STICKY FOOTER GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Sticky Footer</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
sticky-footer.css
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
USING NAVBAR_FIXED_BOTTOM
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Include this in your footer:
position:fixed;
.container
{
bottom: 0px;
position: fixed;
}
In a responsive design, you shouldn't have to set exact pixels for placing elements. In a mobile screen the width is much smaller, and that could be the cause of the footer moving to the side. Rather, something like this should be more appropriate based on your use-case:
<div class="container" style="position:absolute; bottom:0px; text-align:center;">
<p>Thank you and Goodbye</p>
</div>
If the content can be something other than the text here, an automatic margin, margin: auto;, can be useful.
HTML PART:
<html>
<body>
<div id="content">
<div id="main"></div>
</div>
<div id="bottom"></div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
#bottom {
position: relative;
margin-top: -180px;
height: 180px;
clear: both;
}
footer{position:absolute;bottom:0px;}
<html>
<body>
<footer>
<div class="container">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
Guess The question is to fix the footer in bottom. The content size may vary but the footer must be visible always and it should be fixed. Here is the code. Hope it will be usefull. The background color are given just to differentiate sections.
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-12" style="background-color:grey;height:1000px;">Content Here</div>
</div>
<footer>
<div class="col-md-12 container" style="position:fixed; BOTTOM:0px;background-color:red;">
<p class="pull-right">Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
I have been trying to create two separate Bootstrap rows, each with a width of 8.
Unfortunately, both rows overlap each other. I've tried various approaches to solving the problem but nothing is working.
I'm curious if this is a problem with the way I'm using column widths.
Sorry for such a simple question - I'm fairly new to all of this.
HTML
<div class="container">
<!-- HEADLINE -->
<div class="row">
<div class="short-description col-xs-8">
<div class="listing-headline">
{{ adContent?.headline }}
</div>
<div class="location-info">
{{ location?.city }}, {{ location?.state }}, {{ location?.country }}
</div>
<hr>
</div>
</div>
<!-- DETAILS OVERVIEW -->
<div class="row">
<div class="details-overview col-xs-8" *ngFor="let info of unitContent">
<div class="rental-type">
{{ info?.unitContent.propertyType }}
</div>
<div class="guest-allowance">
</div>
<div class="space-type">
</div>
<div class="bed-number">
</div>
<hr>
</div>
</div>
</div>
CSS
.short-description {
height: 80px;
padding: auto;
margin-top: 20px;
}
.listing-headline {
font-style: bold;
font-size: 3em;
line-height: 120%;
}
.location-info {
margin-top: 15px;
font-weight: 300;
font-size: 1.4em;
}
.details-overview {
}
Your Bootstrap looks fine to me. I think it might be a CSS issue because if you remove the CSS there's no overlap.
Adding a margin-top in .details-overview may help.
Your class .listing-headline has a to big font size / line height for your .short-description class with height of 80px;
You have to decrease the font size or increase the height of .short-description for avoiding overlapping in your case.
When you delete the height of .short-description it looks nice:
.short-description {
margin-top: 20px;
}
Nothings wrong with your code. I think overlapping of both rows with each other is because of some codes missing with bootstrap stylesheets (either of bootstrap.css or bootstrap.min.css) you are using. It's better to get a new copy of it.
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="listing-headline">
HEADLINE 1
</div>
<!--/col-xs-8-->
<div class="location-info">
CITY, STATE, COUNTRY
</div>
<!--/col-xs-8-->
<hr>
</div>
<!--/col-xs-8-->
</div>
<!--/row-->
<div class="row">
<div class="col-xs-8">
<div class="rental-type">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!--/rental-type-->
<div class="guest-allowance">
</div>
<!--/guest-allowance-->
<div class="space-type">
</div>
<!--/space-type-->
<div class="bed-number">
</div>
<!--/bed-number-->
<hr>
</div>
<!--/col-xs-8-->
</div>
<!--/row-->
</div>
<!--/container-->
<style type="text/css">
.short-description {
height: 80px;
padding: auto;
margin-top: 20px;
}
.listing-headline {
font-style: bold;
font-size: 3em;
line-height: 120%;
}
.location-info {
margin-top: 5px;
font-weight: 300;
font-size: 1.4em;
}
</style>