I'm facing an annoying issue with flexbox (I'm a beginner).
As you can see here: https://codepen.io/guy-ben-yeshaya/pen/NeqjbG
1) Is it possible, while shrinking the browser until certain point, that the red box and the text will shrink all together (without setting the text size to VW, because it becomes too small on mobile size), instead of the elements go under each other?
2)Why when shrinking the browser to a phone size, the text doesn't become responsive?
Thanks alot for reading and helping!
.section-1{
margin-top: 200px;
display:flex;
text-align: left;
justify-content: space-around;
flex-wrap: wrap;
}
.headertext1{
font-family: 'Raleway';
color: #1CD2D5;
font-size: 80px;
}
.headersubtext{
font-family: 'Raleway';
color: black;
font-size: 25px;
}
.btn{
border-radius: 0px;
border-color: #1CD2D5;
background: #1CD2D5;
color: black;
font-family: 'dosis';
padding: 10px 25px;
font-size: 15px;
}
.box{
width: 300px;
height: 300px;
background-color: red;
}
<html>
<body>
<div class="container">
<div class="section-1">
<div class="1 flex1">
<h1 class="headertext1"><b>BARAN</b>GLOBAL</h1>
<h3 class="headersubtext">Real Estate and consultant agency. <br>A link to your future thourgh intelligent investing.</h3>
<b>Learn More</b>
</div>
<div class="2 flex1">
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
Related
Looking to align this image on the right with the other text that I have. When I run the code, it pushes the margin down and places the image below the text to the right. Preferably I'd like the image evenly with the top text. Any recommendations to help as well as suggestions for cleaning up code are appreciated.
<div class="main">
<h1 class="awesome" <strong>Welcome!</strong></h1>
<div class="text"<small><p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p> </small> </div>
<div class="button1"
<button> Sign Up </button>
</div>
<div class="Image">
<img src="Images/download.jpg"
alt="Rocket"
</div>
</div>
</div>
.main{
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
align-self: flex-start;
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
.Image{
align-self: flex-end;
}
You can put the text block (heading, text, button) in a container and use flexbox to position it next to the image like the example below. This way you can ommit most of the flex alignment css you had previously.
If you wanted something else, please add a picture of what you are trying to achieve.
.main{
display: flex;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
gap: 10px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
<div class="main">
<div>
<h1 class="awesome"><strong>Welcome!</strong></h1>
<div class="text">
<small>
<p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p>
</small>
<button class="button1"> Sign Up </button>
</div>
</div>
<img src="https://picsum.photos/id/237/300/300" alt="Rocket"/>
</div>
I am trying to make a simple webpage however I am stuck on one problem. As soon as I add more text underneath the four boxes unequally the position of these boxes messes up. I was trying adding the height and width in .content .text in CSS and it seems to work when I specify height 150px or any positive integer(however the text moves out from the parent div) but I want to achieve the result in a flexible way. Rather than defining the height, I want to implement the height so that no matter how long the text I add the container's height expands rather than moving the blue box up or down.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
box-sizing: border-box;
}
.header {
background-color: rgb(13, 13, 83);
padding: 0 200px;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-links {
display: flex;
padding-top: 10px;
}
.right-links {
margin-left: auto;
}
.right-links ul li {
padding-left: 20px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 90px 0px;
}
.container .image {
margin-left: auto;
}
img {
height: 200px;
width: 400px;
}
button {
border: 2px solid rgb(68, 68, 211);
margin-top: 10px;
padding: 10px 20px;
font-size: large;
font-weight: 700;
background-color: rgb(68, 68, 211);
border-radius: 5px;
cursor: pointer;
color: white;
}
/* Section of thw code that i causing problem*/
.info {
color: black;
background-color: rgb(235, 195, 195);
padding: 30px 200px;
text-align: center;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 30px 0;
}
.card {
height: 150px;
width: 150px;
border: 3px solid rgb(48, 15, 235);
border-radius: 10px;
display: flex;
flex-direction: row;
}
.content .text {
max-height: auto;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/portfolio css/portfolio.css">
<title>My Portfolio</title>
</head>
<body>
<div class="header">
<div class="header-links">
<div class="left-links">
<ul>
<li>Header Logo</li>
</ul>
</div>
<div class="right-links">
<ul>
<li>Header Link one</li>
<li>Header Link two</li>
<li>Header Link three</li>
</ul>
</div>
</div>
<div class="container">
<div class="someInfo">
<h1>This website is awesome.</h1>
<p>The website has some subtext that goes here.</p>
<button>Sign Up</button>
</div>
<div class="image"><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
</div>
</div>
</div>
<div class="info">
<h1>Some random information.</h1>
<div class="cards">
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
</div>
</div>
<div class="quote"></div>
<div class="callToAction"></div>
<div class="footer"></div>
</body>
</html>
Try using the following style on .cards
.cards {
display: flex;
justify-content: space-evenly;
/* start works, but doesn't have full browser support */
/* align-items: start; */
align-items: flex-start;
padding: 30px 0;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
padding: 30px 0;
}
You set the align-items to center instead of flex-start.
Now it will align the items on the top line.
I'm designing a website for my photography services and I would like to have the prices display in circles that are responsive on mobile.
This is how it looks on desktop:
Desktop view
Unfortunately it looks like this on mobile:
Mobile View
This is the code I'm using for each circle:
.pricessquarered {
display:flex;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: center;
border: solid 16px #d17461;
padding: 30px;
width: 10vw;
height: 10vw;
color: #d17461;
font-size: 22px;
padding-top: 30px;
border-radius: 100%;
}
<div class="pricessquarered">
<div>
<h3><span style="color:#d17461">1 image</span></h3>
<p>
45€
</p>
<hr>
<p><span style="font-size:14px; color:black">
USD $50
</span></p>
</div>
</div>
How would I go about having the circle countain the text as nicely as it does on dekstop?
The one way is to set a fixed width and height when screen size is less.
Second option is that you decrease the font size when the screen size is less.I have set 991px as breakpoint.You can take your own breakpoints.
#media all and (max-width:991px){
.pricessquarered {
width:120px!important;
height:120px!important;
margin-bottom:10px!important;
}
.container{
flex-direction:column;
}
}
.container{
display:flex;
}
.pricessquarered {
transition:all 0.3s;
display:flex;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: center;
border: solid 16px #d17461;
padding: 30px;
width: 10vw;
height: 10vw;
color: #d17461;
font-size: 22px;
padding-top: 30px;
border-radius: 100%;
}
<div class="container">
<div class="pricessquarered">
<div>
<h3><span style="color:#d17461">1 image</span></h3>
<p>
45€
</p>
<hr>
<p><span style="font-size:14px; color:black">
USD $50
</span></p>
</div>
</div>
<div class="pricessquarered" style="transition-delay:100ms;">
<div>
<h3><span style="color:#d17461">2 image</span></h3>
<p>
45€
</p>
<hr>
<p><span style="font-size:14px; color:black">
USD $50
</span></p>
</div>
</div>
<div class="pricessquarered" style="transition-delay:200ms;">
<div>
<h3><span style="color:#d17461">3 image</span></h3>
<p>
45€
</p>
<hr>
<p><span style="font-size:14px; color:black">
USD $50
</span></p>
</div>
</div>
</div>
You can appply flex to the div which is inside .pricessquarered, with flex-direction: column and some additional settings (see below). You'll also need to remove the top and bottom margins of all its child elements to fit them into the container:
.pricessquarered {
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: center;
border: solid 16px #d17461;
padding: 30px;
width: 10vw;
height: 10vw;
color: #d17461;
font-size: 22px;
padding-top: 30px;
border-radius: 100%;
}
.pricessquarered>div {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-top: 30px;
padding-bottom: 30px;
}
.pricessquarered>div * {
margin: 0;
}
<div class="pricessquarered">
<div>
<h3><span style="color:#d17461">1 image</span></h3>
<p>
45€
</p>
<hr>
<p><span style="font-size:14px; color:black">
USD $50
</span></p>
</div>
</div>
An additional note: The flex setting of your .pricessquarered only affects the div which is a direct child of .pricessquarered, not all the other elements inside it. It basically only centers that element inside its parent (which could be the body, but I can't see that from your code). The placement of all the other elements (with the exception of the text-centering) needs the additional settings I posted above.
I have a small div under each image that I need to be exactly at the bottom of the image also when my site is viewed on small devices. My whole site is in Bootstrap-3 already, but now my current code shows the small div called DATA half way over the image when viewed on smaller devices.
Two issues:
1 - How to make the div (data) have the responsive width of the responsive image always?
2 - How to make sure the div (data) sticks at the bottom of the image always for different device dimensions?
I was messing around with top:400px but I cannot get it right, and width should actually always be 100% namely the width of the image but still my div sticks out way too much...
.image {
max-width: 100%;
max-height: 100%;
margin: 0;
display: block;
padding: 0px;
}
.data {
font-size: 11px;
font-family: 'Source Sans Pro',sans-serif;
font-style: normal;
color: #FFF;
font-weight: 700;
background-color: #000;
opacity: 0.7;
padding: 0 10px 0 10px;
border-bottom: 0px solid #FFF;
z-index: 3;
display: block;
position: absolute;
opacity: 0.7;
top: 400px;
left: 0;
min-width: 100%;
}
<div class="block">
<div class="item">
<div class="image"><img alt="" src="http://lorempixel.com/400/400" /></div>
<div class="tag">
TAG
</div>
<div class="title">
title
</div>
<div class="data">
<div class="date">
01012001
<div class="author">
Author
</div>
</div>
</div>
</div>
</div>
I hope i understand u right... so, your issue is:
Div .data must be always 100% width over the image?
Div .data must be always at bottom on the imate?
So check that:
.image {
position: relative;
display: inline-block; /* This can be inline too */
margin: 0 auto;
padding: 0px;
}
.image .data {
padding: 0 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.7);
font-size: 11px;
font-family: 'Source Sans Pro',sans-serif;
font-style: normal;
font-weight: 700;
color: #FFF;
}
<div class="block">
<div class="item">
<div class="image">
<img alt="" src="http://lorempixel.com/400/400" />
<div class="data">
<div class="date">
01012001
<div class="author">
Author
</div>
</div>
</div>
</div>
<div class="tag">
TAG
</div>
<div class="title">
title
</div>
</div>
</div>
Some advices- try to group css styles. Use better selectors. Try to use all HTML 5 tags- for example, image can be wrapped with figure tag and the .data element- can be just figurecaption.
Good luck!
I am new to Bootstrap and need help please.
I have text and images divided in four columns as you can see in my code. I have set alignment according to screen size using media queries (as shown in CSS). BUT if I am resizing the window and reach at the screen size of a tablet view you can say (check Screenshot No. 1) it looks quiet messy as the text is too large and image is too close to the text. So, at THIS screen size i.e. Tablet view, I want my columns to be aligned vertically (like Screenshot No. 2) but I want my image to be on the left side and the text and headings should be next to the image. BUT it shouldn't disturb the Mobile view as everything gets in center in mobile view (check Screenshot No.3) which is perfect for me already.
If still my question is not clear enough then please check the template http://www.templatemonster.com/demo/58152.html
They have section of "Work Team" which I like to have.
I look forward to get help!
Thank you!
<div class="jumbotron">
<div id="wrapper"> <!--Wrapper-->
<div class="container"> <!--Container-->
<div class="row" style="padding-bottom: 40px;">
<div class="col-md-12" align="center">
<h1>Meet Us</h1><hr class="style1"></hr>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="images/11.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Shaikh Obaidullah</h2>
<h3 class="style1">CEO / Web Developer</h3>
<hr class="style2"></hr>
<p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p>
</div>
<div class="col-sm-3">
<img src="images/12.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Ovais M. Shaikh</h2>
<h3 class="style1">Graphic Designer</h3>
<hr class="style2"></hr>
<p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p>
</div>
</div>
</div> <!--Container-END-->
</div> <!--Wrapper-END-->
.jumbotron {
background-image: url('../images/13.jpg');
background-attachment: fixed;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.img-responsive {
margin: 0 auto;
}
#wrapper {
background-color: #FFF;
background: rgba(0,0,0,.7);
color: #FFF;
padding-bottom: 40px;
}
hr.style1 {
margin-bottom: 30px;
margin-top: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
#media (min-width: 768px) {
h2.style1{
color: #8884bc;
text-align: left;
margin-bottom: 0px;
}
h3.style1{
text-align: left;
margin-top: 10px;
}
hr.style2 {
margin-bottom: 50px;
margin-top: 50px;
margin-left: 0px;
width: 100px;
border-top: 2px solid #8884bc;
}
p.style1{
font-size: 20px;
text-align: left;
color: #eee;
}
.jumbotron{
margin-bottom: 0px;
}
}
#media only screen and (max-width:768px) {
hr.style2 {
margin-bottom: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
h2.style1{
color: #8884bc;
text-align: center;
margin-bottom: 0px;
}
h3.style1{
text-align: center;
margin-top: 5px;
font-size: 20px;
}
p.style1{
margin-bottom: 80px;
font-size: 16px;
text-align: center;
color: #eee;
}
}
I don't know if I clearly understand You. But i think that your code must be like this:
<div class="row">
<<div class="col-md-5">
<div class="left">
<img>
</div>
<div class="right">
<h1>
some text
</h1>
</div>
</div>
<<div class="col-md-5">
<div class="left">
<img>
</div>
<div class="right">
<h1>
some text
</h1>
</div>
</div>
</div>
and the class right, must be float:right;, and left float:left; ,amd the col-md-5 must be display: inline-block;