when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
/*my container*/
.container-home{
width: 100%;
height: 60rem;
display: flex;
align-items: center;
}
/*
the articles are here*/
.words {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100vh;
margin-left: 25vh;
transition: 1.5s;
}
.header{
font-size: 5rem;
font-weight: 500;
}
.description {
display: block;
margin-top: 3rem;
font-size: 2rem;
}
/*explore text span*/
.explore{
margin-top: 2.5rem;
width: 15rem;
height: 4rem;
text-align: center;
display: block;
font-size: 2rem;
border: 0.1rem solid #000;
border-radius: 2.5rem;
margin-left: 1.5rem;
position: relative;
z-index: 1;
}
/*explore text a*/
.explore a{
display: block;
text-decoration: none;
font-size: 2rem;
color: #000;
text-align: center;
margin-top: 0.7rem;
}
.explore:hover {
border-color: transparent;
text-align: center;
transition: 1s;
transform: translateY(0.6rem) translateX(-1rem);
}
/*colored rectangle under text explore*/
.explore-hover{
display: inline;
position: absolute;
width: 15rem;
height: 4rem;
border-radius: 2.5rem;
background-color: #f1e0d4;
top: 42rem;
}
/*circle , solid circle and image in this*/
.image-design{
width: 100%;
height:100vh;
}
.circle{
position: relative;
width: 100%;
height: 100%;
clip-path: circle(300px at center);
background-color: #d7e7f1;
margin-top:8rem;
}
.solid-circle{
position: absolute;
width: 60rem;
height: 60rem;
border-radius: 50%;
background-color: transparent;
top: 30%;
left: 28%;
border: 1px solid #3398d7;
}
/*I created it to put an image on top of the circles*/
.conainer-image-design{
position: absolute;
width: 100%;
left: 25rem;
height:100vh;
}
.image{
position: relative;
top: 25%;
left: 12%;
}
<div class="container-home">
<div class="words">
<span class="header">
Handcrafted<br>
& ethically sourced
</span>
<span class="description">A collection inspired by old-world charm, crafted
<br>with moisannites and diamonds.
</span>
<span class="explore">Explore→</span>
<div class="explore-hover"></div>
</div>
<div class="image-design">
<div class="conainer-image-design">
<div class="circle"></div>
<div class="solid-circle"></div>
</div>
<span class="image"><img src="./ring.png"></span>
</div>
</div>
what do you recommend to give the measurements, I mainly use rem or % .which is better to keep the image intact?
I have seen the following design on this facebook page.
I am not sure how the top corners are made, and i cannot imagine a way to implement this.
Can anyone provide an idea?
Thanks in advance.
Using mask spans can be a good solution.
.container {
background-color: #242B40;
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
align-content: center;
justify-content: center;
}
.navbar {
width: 80%;
display: block;
background: #fff;
position: relative;
height: 50px;
border-radius: 0 0 30px 30px;
}
.left-mask {
width: 42px;
height:55px;
background: #fff;
display: block;
position: absolute;
top: -17px;
left: -20px;
transform: rotate(-32deg);}
.left-mask:before {
width: 45px;
display: block;
background: #242B40;
height: 65px;
border-radius: 0px 20px 0px 0px;
margin-left: -34px;
content: ' ';
}
<div class="container">
<div class="navbar">
<span class="left-mask"></span>
</div>
</div>
Simple example to get curve edges
.curve{
background-color:black;
width:100%;
height:20px;
border-bottom-left-radius:50% 50%;
border-bottom-right-radius:50% 50%;
background: #232323;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.36);
}
.box {
width: 100%;
height: 45px;
background: #232323;
}
<div class="box"></div>
<div class="curve"></div>
Im trying to make a piano, but im starting by the basics.
Im dweling with centering the inside content of the div.
I want the to be right in the middle and centered inside his father div
heres the code:
html
<div class="keys">
<div class="key" id="keyA">
<kbd>A</kbd>
</div>
<div class="key" id="keyS">
<kbd>S</kbd>
</div>
</div>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: chocolate;
}
.keys{
padding: 4px 5px;
position: fixed;
height: 40%;
max-height: 60%;
width: 60%;
max-width: 80%;
display: flex;
justify-content: space-around;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: white solid;
align-items: center;
text-align: center;
}
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
}
kbd{
/*border to see the with and weight*/
border: pink solid 1px;
color: aliceblue;
}
heres a fiddle: https://jsfiddle.net/hnd9jr4y/
thank you
Flexbox is only working on the direct content of a flexbox container. To additonal center the Name of the keys add to .key additional 'flex-settings'.
Have a look to the example below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: chocolate;
}
.keys{
padding: 4px 5px;
position: fixed;
height: 40%;
max-height: 60%;
width: 60%;
max-width: 80%;
display: flex;
justify-content: space-around;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: white solid;
align-items: center;
text-align: center;
}
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
/* JUST ADD */
display: flex;
align-items: center;
justify-content: center;
}
kbd{
/*border to see the with and weight*/
border: pink solid 1px;
color: aliceblue;
}
<div class="keys">
<div class="key" id="keyA">
<kbd>A</kbd>
</div>
<div class="key" id="keyS">
<kbd>S</kbd>
</div>
</div>
Use flexbox
.key{
border: black solid 1px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
max-height: 95%;
height: 90%;
width: 70px;
max-width: 95%;
border-radius: 10px;
display: flex;
align-items: center; // vertical centering
justify-content: center; // horizontal centering
}
I'm trying to achieve a design close to the snippet here. My problem is that I can't find a way to replace the blue background of .title by a simple transparency (so that the container's background stays visible). If I simply remove the blue background, the border becomes visible where .title is.
Also the "title" is generated by JS so I can't reliably predict the length of div as it may slightly vary depending on the situation.
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
background: hsla(200, 70%, 55%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
Does anyone have an idea how to achieve what I'm trying to do ? Please let me know if my explanation is too brief or unclear.
Thank you !
You can achieve that with pseudo elements. Take a look at this:
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
}
.title span::before,
.title span::after{
content: "";
height: 2px;
position: absolute;
background: hsla(200, 70%, 20%, 1);
width: calc(50% - 40px);
top: 9px;
}
.title span::before{
left: 0;
}
.title span::after{
right: 0;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
You could try to use a fieldset with a legend instead of a div:
https://jsfiddle.net/v9p60p6g/1/
<html>
<head>
<style>
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
fieldset {
border: solid black 2px;
}
legend {
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Testtitel</legend>
Content
</fieldset>
</div>
</body>
</html>
You can get the desired effect by adding more elements
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title__text {
flex: 0 0 auto;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
/* background: hsla(200, 70%, 55%, 1); */
}
.title__border {
flex: 1;
border-top: 0.1rem solid hsla(200, 70%, 20%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-top: 0.1rem solid transparent;
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span class='title__border'></span>
<span class='title__text'>Text Title</span>
<span class='title__border'></span>
</div>
<div class="content"></div>
</div>
</div>
And don't use selectors like .title span. They do not target specific element and styles used by them cannot be reused somewhere else, which means excessive code duplication. Element selectors (like .title span) are also likely to cause problems (you are selecting all spans in .title element) whenever you change your code (adding another span with different styles is hard), which means even more duplicated code! Duplicated code = more complex code = code that is harder to maintain!
You should get BEM or SMACSS or any other methodology (you may even create your own).
I'm trying to create a UI element that remains centered and the image scales to the size of the container. I have additional caption and text over the image. But the image seems to scale proportionally over only some of the range when I adjust the height or width. Preferably using only CSS and HTML. The top-level div does need to be absolutely positioned. I'm indifferent to the use of flexbox. That was just one tact I've tried.
Here it is as a codepen.
And the full code is below, though it is easier to play with it in the codepen as you can adjust the results pane easily. (open up the console so you can also adjust height.)
.block {
/* this needs to remain an absolute positioned block with size and location expressed in percent */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #777777;
/* Don't care if using flexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
.imagecontain {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.image {
max-height: inherit;
max-width: calc(100% - 8px);
padding: 0 !important;
border: 4px solid #123456 !important;
}
.button {
border-color: #b2b2b2;
background-color: #f8f8f8;
color: #444;
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
min-width: 52px;
min-height: 47px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
line-height: 42px;
cursor: pointer;
box-shadow: 0px 0px 3px #888888 !important;
}
.overimage {
vertical-align: bottom;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 80%;
min-width: 60%;
padding: 5px;
opacity: .7;
transform: translateX(-50%);
background-color: black;
color: white;
border-radius: 10px;
z-index: 2;
}
.name {
text-align: bottom;
background-color: white;
padding: 5px;
border: 1px solid black;
}
<div class="block">
<div class="imagecontain">
<div class="overimage">this is a test of the emergency broadcast</div>
<img class="button image" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/582520_10151526852434301_1015227082_n.jpg?oh=6537667094d5a160b8fbab0728dc2f5a&oe=57971FCB">
</div>
<div class="name">Mountains</div>
</div>
Use the background-size properties in CSS. Change your image from an tag to the background of the div. The specific property you're looking for is probably
background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add:
.imagecontain {
max-width: 100%;
width: 100%
}
Remove:
.block {
height: 80%;
}