I am new to HTML and CSS and have created a birthday card which I want to have a 50/50 split down the centre . I have inserted my image on the left however when I add text to the right and side it is too close to the centre line, so I have used some padding (padding-left: 50px;) to move it further across. The issue is when I do this the box on the right increases. I want the box on the right to remain the same size but just be able to adjust the text inside that box without it resizing.
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
flex: 1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: auto;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
flex: 1;
background-color: burlywood;
border: 5px solid;
padding-left: 50px;
}
<!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="style.css">
<title>Flex</title>
</head>
<body>
<div class="card">
<div class="left">
</div>
<div class="right">
<h1 class="title">Hello</h1>
<h2 class="birthday">Happy Birthday</h2>
<p class="message">We really miss you and are thinking about you</p>
<p class="bye"> Lots of love and see you soon x</p>
</div>
</div>
</body>
</html>
Try this
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: 50%;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
width: 50%;
background-color: burlywood;
border: 5px solid;
padding: 0 25px;
box-sizing: border-box;
}
Related
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!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">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
I simply have a div inside another div with overflow: hidden and if you are in chrome then you will see whitespace around the border especially when zooming in and out, if you are in firefox it is less glitchy and there is only white space in the corners of the border. chrome screenshot / firefox screenshot
<style>
.div1 {
border: 10px solid purple;
border-radius: 30px;
height:300px;
width:300px;
overflow: hidden;
position: relative;
}
.div2 {
background: purple;
position: absolute;
height: 400px;
width: 400px;
top: -20px;
left: -20px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
Note that I don't want an alternative way to achieve the above aesthetic but I need a proper solution while keeping the div inside a div, because my bigger project requires this structure and this code is simplified to showcase the bug. Thanks!
I've found a trick for it here it is:
don't use background-color for the #outer
instead, give background-color property to #inner and #inner2 and put your content inside inner2, now instead of a border, you can use box-shadow.
this way you can have both sharp edges and a border with a different color.
*,
*::before,
*::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
#outer {
height: 5rem;
width: 10rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 0 2px black;
margin: auto;
}
#inner {
background-color: blue;
height: 2rem;
width: 100%;
}
#inner2 {
height: 4rem;
background-color: red;
width: 100%;
}
<!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">
<title>Document</title>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
<div id="inner2"></div>
</div>
</body>
</html>
So i have the following in my html page now, which is a circle that is centered in a div:
However, what i want is for the circle shape to retain its form whenever a window adjustment is made, for example:
If i right click and Inspect, the problem is my circle becomes like so:
How do i ensure the shape of the circle remains even when the outer container width or height is adjusted?
Edit: Extension from Derek.W solution
Now what if, instead of basing it on the overall window, its based on a containing element?
* {
box-sizing: border-box;
}
html,body {
height: 100%;
}
.main_container {
border: 1px solid black;
height: 90%;
width: 100%;
}
.outer {
border: 1px solid black;
height: 20%;
width: 100%;
}
.child1 {
border: 1px solid black;
height: 50%;
}
.child2 {
border: 1px solid black;
height: 50%;
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 5%;
border: 1px solid black;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main_container">
<div class = "outer">
<div class = "child1"></div>
<div class = "child2">
<div class = "circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Checking the circle style, the width is set 10% of the viewport width and the height is set 20% of the viewport height so it won't be the circle.
To make the circle, it is needed to set the height and width of the same size.
20% of the viewport height is same as 20vh. So you can set the width of circle as 20vh instead of 10% as follows.
html,body {
height: 100%;
}
.outer {
border: 1px solid black;
height: 20vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
border-radius: 50%;
width: 20vh;
border: 1px solid black;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="avc_label_style.css">
<title>Document</title>
</head>
<body>
<div class = "outer">
<div class = "circle"></div>
</div>
</div>
</body>
</html>
To make a perfect circle the height and width must be equal.
So you can get it done by
.circle {
border-radius: 50%;
width: 10vh;
border: 1px solid black;
/* hight and width must be equal */
height: 10vh;
}
or using px
.circle {
border-radius: 50%;
width: 120px;
border: 1px solid black;
/* hight and width must be equal */
height: 120px;
}
I usually use the px solution passed on the situation.
If it's only about a visual effect, you can do it using radial-gradient:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_container {
border: 1px solid black;
height: 90%;
}
.outer {
border: 1px solid black;
height: 20%;
}
.child1 {
border: 1px solid black;
height: 50%;
}
.child2 {
border: 1px solid black;
height: 50%;
background:radial-gradient(circle closest-side,
transparent calc(100% - 4px),#000 calc(100% - 3px) calc(100% - 1px),transparent);
}
<div class="main_container">
<div class="outer">
<div class="child1"></div>
<div class="child2">
</div>
</div>
</div>
I've browsed a whole lot of posts on here, some of which relate more closely to my issue than others; yet I've still to find a solution/explanation. -- Sorry if I've missed the answer somewhere!
Here goes.
I have this issue on with regards to a hero image on a site I'm creating, that I'd love to see resolved before I venture any further.
My issue is, that currently, on zoom, it goes towards the upper left corner, and adds a horizontal scrollbar at the bottom.
Ideally I'd like for the hero image to be centered when I zoom in with the browser, and for there to be no horizontal scrollbar.
Hopefully there's a simple fix, or something obvious I'm missing, and you lot could provide my feeble mind with an explanation as to what exactly it is that I'm not getting.
Below is provided the HTML and CSS I have so far. - Thanks in advance!
* {
margin: 0;
padding: 0;
font-size: 10px;
}
.hero_Image {
height: 1080px;
width: 1920px;
background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px solid lightgray;
margin: 0 auto;
position: relative;
box-sizing: border-box
}
.preview {
height: 50rem;
width: 1920px;
margin-left: 10%;
background: green;
margin: 0 auto;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
to fix your problem add this css to your file and your problem is that you let the width of sections overflowing
.hero_Image {
height: 500px;
width: 500px;
background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
border-bottom: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.preview {
height: 500px;
width: 500px;
margin-left: 10%;
background: green;
margin: 0 auto;
overflow:hidden;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
I've decided to make a site about the current election(s) and I'm already having trouble with the intro page.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<div id="Wrapper">
<div id="repicon"></div>
</div>
HTML
<div id="Wrapper">
<div id="repicon">sdsdfsdsds</div>
CSS:
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
//background-size: 140px 140px;
height: 500px;
width: 500px;
}
DEMO LINK
you have a few typos(id="Wrapper" won't match the #wrapper in CSS) plus for a background-image to work it needs height
As your comment, you want the background-image centered, just apply center in background shorthand.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background: url(http://i.imgur.com/Ow7TR.png) no-repeat center / 140px 140px;
height:140px;
}
<div id="wrapper">
<div id="repicon"></div>
</div>
Its not working because your div has no content and that results that it has no height. To see your image you have to add content to the div or a min-height
#repicon {
min-height: 140px;
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
See this working Fiddle
You need to have content inside your div if you want the "background-image" to show up.
You need to define height and width for #repicon
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
width: 140px;
height: 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"></div>
</div>
</body>
</html>
Just add " " to your div and update your css for best result.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"> </div>
</div>
</body>
</html>