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.
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 want to remove this space to make <span>-s closer, but there is no any margin or padding that could add more space between them.
<!-- HTML -->
<div class="service-container" id="logo-title-service-container">
<span class="logo-text" id="logo-title">company name</span><br>
<span class="logo-text" id="logo-subtitle">This is a subtitle</span>
</div>
Sass
// Sass
#logo-title-service-container
text-align: left
padding-left: 10px
#logo-title
font-size: 18px
#logo-subtitle
padding-top: -5px
font-size: 12px
How can I remove the space between them?
You should remove the 'br' element first.
then make the display of title and subtitle block or as i did here make the parent display flex and flex-direction to column to make it work.
#logo-service-container {
width: 100%;
text-align: center;
padding-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
#logo-main {
width: 26px;
height: 26px;
}
#logo-title-service-container {
display: flex;
flex-direction: column;
text-align: left;
padding-left: 10px;
}
#logo-title {
font-size: 18px;
}
#logo-subtitle {
font-size: 12px;
}
<div class="sidebar" id="left-sidebar">
<div class="service-container" id="logo-service-container">
<img id="logo-main" src="resources/images/icons/logo.svg" alt="logo">
<div class="service-container" id="logo-title-service-container">
<span class="logo-text" id="logo-title">company name</span>
<span class="logo-text" id="logo-subtitle">This is a subtitle</span>
</div>
</div>
</div>
You should try to avoid <br>
replace the span with div
<div class="sidebar" id="left-sidebar">
<div class="service-container" id="logo-service-container">
<img id="logo-main" src="resources/images/icons/logo.svg" alt="logo">
<div class="service-container" id="logo-title-service-container">
<div class="logo-text" id="logo-title">company name</div>
<div class="logo-text" id="logo-subtitle">This is a subtitle</div>
</div>
</div>
</div>
SASS:
#logo-service-container
width: 100%
text-align: center
padding-top: 15px
display: flex
align-items: center
justify-content: center
#logo-main
$size: 26px
width: $size
height: $size
#logo-title-service-container
text-align: left
padding-left: 10px
#logo-title
font-size: 18px
#logo-subtitle
padding-top: -5px
font-size: 12px
I am trying to get my anchors to be the same size, but since the texts are different length, the padding distance is different. I end up getting different sized squares.
.roles{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
width: 90%;
}
.roles h3{
width: 22%;
margin: 0px 4%;
margin-top: 75px;
margin-bottom: 75px;
color: #666;
display: inline-block;
text-align: center;
}
.roles h3 a{
font-size: 30px;
text-decoration: none;
padding: 20px;
border: 1px solid #000000;
border-radius: 10px;
}
<div class = "roles">
<h3> President </h3>
<h3> Vice President </h3>
<h3> Secretary </h3>
<h3> Treasurer </h3>
<h3> Pledge Master(s) [PM] </h3>
<h3> Social Chair </h3>
<h3> Housing Chair </h3>
<h3> Academic Chair </h3>
<h3> Committee Chair </h3>
</div>
This is my HTML and CSS code. How should I change it without going into each one and manually inputting it? Thank you!
Using inline-flex you can achieve what you are looking for. I had to make some changes to your code though. I changed the h3 for div, since it is more common to have elements inside a div or a span than h3. I moved the padding and the border to the div, because otherwise it would be quite hard to fit the needed spaces. You can learn more about the flexbox layout in the following page.
.roles{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
width: 100%;
}
.roles div{
width: 25%;
color: #666;
display: inline-flex;
text-align: center;
flex-grow: 1;
padding: 10px;
border: 1px solid #000000;
border-radius: 10px;
height: 100px;
}
.roles div a{
font-size: 30px;
text-decoration: none;
width: 100%;
height: 100%;
}
<div class = "roles">
<div> President </div>
<div> Vice President </div>
<div> Secretary </div>
<div> Treasurer </div>
<div> Pledge Master(s) [PM] </div>
<div> Social Chair </div>
<div> Housing Chair </div>
<div> Academic Chair </div>
<div> Committee Chair </div>
</div>
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>
I have one div containing 3 divs.
original
HTML code
.state {
background-color: rgba(233, 234, 237, 0.9);
height: 7vh;
width: 80%;
border-radius: 14px;
margin: 10px 0 15px 80px;
display: flex;
align-items: stretch;
}
.state-main {
text-align: center;
padding-top: 10px;
font-weight: 900;
font-size: 14px;
}
.options {
text-align: right;
margin-bottom: 10px;
}
.owner-image {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
<div class="state">
<div class="owner">
<img class="owner-image" src="img/uk.jpg">
</div>
<div class="state-main">
<p class="state-name">PENNSYLVANIA</p>
</div>
<div class="options">
<p id="time"></p>
<button>SEND TROOPS</button>
<button>ATTACK</button>
</div>
</div>
Use flexbox (browser support).
.state {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
background-color: lightgray;
}
.state,
.btns button {
text-transform: uppercase;
}
<div class="state">
<img src="http://placehold.it/150x80/fc0">
<p>
Pennsylvania
</p>
<div class="btns">
<button>Send Troops</button>
<button>Attack</button>
</div>
</div>
**For IE9 and older you'll need to provide a fallback. Whether or not you need to do this depends on target audience.
.State is the div that contains all 3. .state-main is yellow div and should go at the center. .options is green div should go far right. .owner-image is the red div, and should stay at the same place.
Using flex to put the layout into place.
.state {
display: flex;
justify-content: space-between;
}
.state-mail {
text-align: center;
}
<div class="state">
<div class="owner-image">
<img src="http://placehold.it/100x50" />
</div>
<div class="state-main">PENNSYLVANIA</div>
<div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>