I want the navigation bar to have the same size regardless of screen size.
I was able to do it with the following CSS.
However, when I add an image below it, its size is no longer fixed and change with the screen size.
I tried to analyze this behavior but I couldn't understand why it behaves that way.
Can someone explain it to me?
Thank you
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="testforanything.css" />
</head>
<body>
<nav class="navigation-bar">
Home
Profile
Contact
</nav>
<!-- When I remove the image, the problem disappears. -->
<img src="https://dummyimage.com/1024x724/000/ffffff.jpg" />
</body>
</html>
It is because your image not responsive and your screen size can not be reduces after reach your image size. Make your image responsive you will be good to go. I make it some thing like that but you can do however you want depending what you want with your image.
`
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
/*added part */
img {
width: 100%;
height: auto;
max-width: 100%;
}
`
I'm not a pro, but I think the justify-content: space-around property of the nav bar causes this behaviour. Try setting it to normal and maybe use a margin instead.
Hope I can help!
Related
This is my HTML with styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I wanted a circle that was slightly cut on both left & right sides(mobile) and up & down (for desktop) so i thought this was the best way but what I observe is that the page also ends up with extra width on mobile and extra height on desktop, I don't want this to happen.
Is there any way deal with this so the circles remain cut and removing the scrolling?
Use heigth: 100% and width: 100% and overflow: hidden on your html tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I am new at css, html and I am designing a web site for my uncle's restaurant. I designed my first prototype in Adobe XD. Then I found a website called Avocode. I used css codes from there.
.logo {
position: absolute;
top: 872px;
left: 57px;
width: 284px;
height: 193px;
z-index: +1;
}
Then I used code at the html document.
<div class="logo"><img src="logo.png" alt=""></div>
It worked really well but I couldn't center the site. What should I do?
A common, accepted, way to center an entire website is to use the margin: auto; approach.
.content {
width: 75%; /* Could be anything, but 75% works here. */
margin: auto; /* This is what center the content div itself. */
border: 1px solid red;
}
p {
text-align: center; /* This will center the text inside the paragraph tag */
border: 1px solid black;
}
<html>
<head>
</head>
<body>
<div class="content">
<p>Here is some content!</p>
</div>
</body>
</html>
The goal is to wrap all your content into a single div and then center that div. This will allow you to still manipulate the styling of your objects inside that div, but overall the whole document will be centered.
for me I really like to use CSS Grid for my projects.
If you'd want to use CSS grid you can just center something like this:
#element{
display: grid;
justify-content: center; /* horizontal centering */
align-content: center; /* vertical centering */
}
In an example it would look like this.
.logo {
display: grid;
justify-content: center;
align-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="logo">
<img src="http://placekitten.com/300/300" alt="">
</div>
</body>
</html>
You can easily center an element
CSS Flexbox
.container {
height: 100vh;
width: 100%;
background-color: orangered;
/* actually you need just these 3 properties specified below, the rest are for demo purposes */
display: flex;
justify-content: center;
align-items: center;
}
.container > p {
padding: 1rem;
background-color: #f7f7f7;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container">
<p>This is a paragraph, that will be centered</p>
</div>
CSS Grids
.container {
height: 100vh;
width: 100%;
background-color: yellowgreen;
/* These 3 properties will suffice */
display: grid;
justify-content: center;
align-content: center;
}
.container > p {
background-color: #f7f7f7;
padding: 1rem;
}
<div class="container">
<p>This is a paragraph, that will be centered</p>
</div>
Absolute Positioning
.container {
height: 100vh;
width: 100%;
background-color: turquoise;
/* Only display property will suffice */
position: relative;
}
.container > p {
background-color: #f7f7f7;
padding: 1rem;
/* These 4 properties are needed */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<p>This is a paragraph, that will be centered</p>
</div>
Try this one I think its use full for you like your expectation.
.logo img {
position: absolute;
top: 2%;
left: 45%;
width: 100px;
height: 100px;
z-index: +1;
}
<div class="logo"><img src="https://i.ibb.co/SQ7YhFZ/tire.png" alt=""></div>
Common HTML CSS Centering element
<html>
<head></head>
<body>
<div class="logo"><img src="logo.png" alt="" /></div>
</body>
</html>
**css**
Solution-1:
.logo{
position:absolute;
display:inline-block;
width: 284px;
height: 193px;
top:50%;
left:50%;
-webkit-transform:traslate(-50%,-50%);
-ms-transform:traslate(-50%,-50%);
transform:traslate(-50%,-50%);}
.logo img{
position:relative;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
margin:auto auto;
}
**Note:** It will center the div element depending on it's window screen size, when
ever screen size is been resized the div element will be centered horizontally as
well as to vertically.
You can do this by giving your div an absolute positioning and then moving the div 50% to the right and down. Then you just transform the div to 50% of the div's height and width and this will force it to the center of the page.
html:
<div class="logo">
<img src="logo.png" alt="">
</div>
css:
.logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
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 have a problem with the button that changes the size of the mobile.
Can I somehow prevent that? I want to get the same look at mobile as on pc.
Button size change example.
The code that I use is:
.container8 {
position: relative;
width: 100%;
max-width: 100%;
}
.container8 img2 {
width: 100%;
height: 100%;
}
.container8 .xxx8 {
position: absolute;
top: 73%;
left: 72%;
background-color: #e20612;
color: black;
font-size: 18px;
padding: 1% 3.5%;
border: none;
cursor: pointer;
border-radius: 10%;
text-align: center;
}
.xxx8:hover {
background-color: #b3ecff
}
.container8 .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container8">
<img src="http://www.scientini.com/application/files/9315/2361/6488/11.png" alt="Snow" width="100%">
<button class="xxx8">FORM</button>
</div>
</body>
</html>
I see in your code that the size of FORM button depends on this button text size. So if you want to have the same font size (and also the same responsive button) on each device set the vw or vh in font size ex. font-size: 2vw;
.container8 .xxx8 {
position: absolute;
top: 73%;
left: 72%;
background-color: #e20612;
color: black;
font-size: 2vw;
padding: 1% 3.5%;
border: none;
cursor: pointer;
border-radius: 10%;
text-align: center;
}
Look in JSFiddle if it is what you want.
vw is device width (responsive)
vh is device height (responsive)
if you set a px size for your button, it will be the same size for each device and screens
.xxx8 {
height: 50px;
width: 100px;
}
Give a fixed width and height to your button, also you should take a look at what Responsive is.
.xxx8{
display: inline-block;
height: 50px;
width: 100px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
remove this meta from HTML file
You could try adding !important at the end of the css which has the size of the button.
Or you can do CSS media queries like this.
#media (max-width: 600px (you need to know on which width your are getting the trouble)) {
.class_of_button{
width: your width;
height: your height;
}
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}