when i try to change logo size, whole background changes size as well. How to do it correctly? i want logo to be 150px by 150px.
I want to make signup form page that looks something like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png
* {
height: 100vh;
}
.main-container {
display: flex;
}
.image {
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
background-size: contain;
background-repeat: no-repeat;
}
.logo {
display: flex;
}
/* .logo img {
height: 140px;
} */
<!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>Sign-up Form</title>
</head>
<body>
<main class="main-container">
<div class="image">
<div class="logo">
<img
src="https://logodix.com/logo/20841.png"
alt="logo"
class="flower"
/>
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="form"></div>
</main>
</body>
</html>
By default, your logo size is too big, and parent div was adjusting according to logo, So if the logo size changes, you whole parent div size will also change. So give them definite value to adjust accordingly
Here some changes i made, if that's helps
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
height: 100vh;
}
.logo {
display: flex;
align-items: center;
color: #fff;
}
.logo img {
width: 150px;
}
.left {
display: grid;
place-items: center;
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
width: 40%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.right {
width: 60%;
padding: 40px;
}
<main class="main-container">
<div class="left">
<div class="logo">
<img src="https://logodix.com/logo/20841.png" alt="logo" class="flower" />
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="right">
<h4>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus tempore assumenda error! Laudantium non voluptates provident molestias expedita atque eaque!</h4>
<div class="form"></div>
</div>
</main>
Related
I want images auto size when users resize browser window, when users resize their browser i don't want images lose any details. I only want resolution width:800px height:400px
I did my best and searched everywhere but their solution didn't work for me, i also put width 100% and max-width 100% still my webpage didn't work.
If anyone would like to gives me some advices i would very appreciate your help thank you.
Please take a look at my code.
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 400px;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Set your .slide as background-size: cover.
See docs: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Also you can position it background-position: center center;
To keep your slide as the same size of the image you can set your padding bottom to have same ratio proportion of the image, something like:
.slide {
...
padding-bottom: 72%;
}
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
padding-bottom: 72%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Here is the correct code after hard work:
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
width: 100%;
height: 100%;
float:left;
margin-top: 40px;
border: 1px solid;
position: relative;
}
.slidebg:before {
content: "";
display: block;
padding-top: 50%;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
<div id="slideshow">
<div class="slidebg">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
</div>
<div class="slidebg">
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
</div>
<div class="slidebg">
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
So I'm trying to recreate this template for practice:
https://blackrockdigital.github.io/startbootstrap-agency/
I have a link to codepen for the code. I hope that's okay:
https://codepen.io/wmufunde/pen/geQaWg
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Bootstrap</title>
<!-- <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Start Bootstrap</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
<div id = "welcome">
<h2>Welcome to our Studio!</h2>
<h1>It's nice to Meet you!</h1>
<button>Tell me More</button>
</div>
</header>
Services
Lorem ipsum dolor sit amet consectetur.
<div class = "row">
<div class = "col">
<h3>Features</h3>
</div>
<div class = "col">
<h3>Easy to Learn and Design</h3>
</div>
<div class = "col">
<h3>Boostrap 3</h3>
</div>
</div>
</body>
</html>
html, header {
height: 100%;
}
header {
background-image: url(/portfolio-practice/img/flowers.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
header h1, h2 {
/* text-align: center;
vertical-align: middle;
line-height: 90px; */
}
button {
text-align: center;
display: inline-block;
vertical-align: middle;
background-color: #fed136;
border-color: black;
border-radius: 2px;
color: black;
border-style: solid;
padding: 10px;
font-family:sans-serif, 'Comic sans';
}
#welcome {
display: flex;
align-items: center;
justify-content: center;
}
nav {
background: #212529;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
width: 100%;
top: 0;
}
li {
display: inline-block;
margin-left: 15px;
}
I managed to align the text just fine without flexbox earlier with the commented out code, but I was informed that I'd have to use flexbox for the button to align in the center. Is this true? If so how do I get it to work correctly? It's been a while since I've used flexbox. Would it be easier to use absolute positioning?
What I want is to get the h1, h2 and button each on a new line. How do I do that please?
You need to set flex-direction: column. Please update your css for id='welcome' as bellow,
#welcome {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
I have problem : my picture doesn't want to center despite I used text-aligne:center;, display:block; and margin: 0 auto;
Here is a picture
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
max-width: 1000px;
margin: 0 auto;
}
#Logo {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>str</title>
<meta name="description" content=" bbbbbbb" />
<meta name="keywords" content="bablal" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="new.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body background="photo/ik.png">
<div id="container">
<div id="Logo">
<img src="photo/lg.png" width="800" height="533.5">
</div>
</div>
</body>
</html>
One way to do it using Flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
background: yellow;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="Logo">
<img src="http://placehold.it/200x100/333333">
</div>
</div>
change #container {max-width:1000px to width:100%}
Set the margin property of the image itself to auto on the left and right.
HTML part
<body>
<div id="container">
<div id="Logo">
<img class="centeredimage" src="photo/lg.png" width="80" height="50">
</div>
</div>
</body>
CSS part
img.centeredimage{
display: block;
margin-left: auto;
margin-right: auto;
}
Fiddle:
https://jsfiddle.net/ja0zhnsd/
Try This:
.Image{
background:#ccc;
padding:30px;
}
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
#container {
width: 100%;
}
#Logo img {
text-align: center;
margin: 0 auto;
}
Does this work?
use this code this will done your job. cheers!
<p style="text-align:center;">
<img src="yourimage.png" alt="Dev N Technologies" width=600 height=200 >
I'd like to center a flexibox in browser window, the code in following jsfiddle works without centering, when the browser screen changes, the image and text change in a responsive way,
Fiddle
<!DOCTYPE html><html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
display: flex;
/*width: 1400px;*/
margin: auto;
}
#container .video {
border: 5px solid red;
width: 750px;
max-width: 100%;
}
#container .desc {
background-color: blue;
max-width: 100%;
}
</style> </head> <body>
<div id="container">
<div class="video">
<img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
style="max-width: 100%">
</div>
<div class="learn">
<p>
isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
<p>
</div>
</div> </body></html>
if I uncomment the /width: 1400px;/ line, the flexibox is centered, but the image and text will not change responsively when browser screen changes, any hint? Thanks,
I think i understand what you're asking for after a few reads so here's what I have done on your coding:
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: auto;
}
#container .video {
border: 5px solid red;
flex-basis: 50%;
max-width: 100%;
}
#container .desc {
background-color: blue;
max-width: 100%;
}
<div id="container">
<div class="video">
<img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
style="max-width: 100%">
</div>
<div class="learn">
<p>
isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
<p>
</div>
</div>
Generally to make the text center beneath the image dependant on the size you need to use flex-wrap: wrap; Also you should always use flex-basis: xyz%; instead of width: xyz% give this a try and let me know if it is what you were after.
I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.
What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I think problem is solved, have a look
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>