For some reason my html and css isn't taking up the entire width of the page, even though I set margin and padding to 0, and width to 100%. It's always worked before, but I have no idea why it isn't working this time. The only thing that has been implemented so far is the just the background and navbar. I have attached an image to demonstrate how it appears right now. Any help would be appreciated.
*{
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
.container{
width: 100%;
height: 100vh;
background: #42455a;
}
.navbar ul{
display: inline-flex;
margin: 50px;
}
.navbar ul li{
list-style: none;
margin: 0px 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img{
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active{
color: #19dafa !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS File -->
<link rel="stylesheet" type="text/css" href="check.css">
<title>Webpage title</title>
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<!-- logo -->
<li class="logo"><img src=""></li>
<li class="active">Home</li>
<li>Services</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You're using Bootstrap.css, which defines a max-width: 540px rule on any element with class="container" when the browser viewport width is wider than 576px:
To fix this, use a different class name other than container, or extend the .container rule in your own stylesheet to set max-width: none;.
But, in my frank opinion, the best solution is to not use Bootstrap.css and to instead take responsibility for styling your own website. I feel Bootstrap has gotten bigger and bigger over the years it takes just as much effort to "learn Bootstrap" as it does to learn how to write one's own base common stylesheet.
Related
Header with logo
i want to align home, etc with the logo, but i think the logo is occupying all the space on top of the menu-headers and i dont know how to reduce it, i've already tried the margin-left or right and also padding but it doesnt help.
i also want to know if it is a bad practice to have negative CSS rules or if there is any bad practices in my code so far.
sorry for the bad english, i`m not a native
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
Since div elements are block elements, they take all available horizontal space of the parent element, i.e. a complete "line".
See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
I would recommend using display: flex on the .main-header class. By default the child elements will be arranged in a row (flex-direction: row).
The align-items property can be used to arrange the elements vertically.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}
Demo: https://jsfiddle.net/u3gv6s7f/
Give the logo a width of x px. That will give it a set size. You can do width=100% and make sure you style the container div as a inline-block or use flex-box in order to set its size straight.
.main-header {
display: flex;
}
img {
width: 100%;
}
That should make every element inside the header display on a row.
Look more into flex-box in order to understand it well. https://flexboxfroggy.com/ is a good resource.
You can use flexbox in main div which wraps logo and links
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}
Current webpage condition image:
I am a new programmer currently teaching myself HTML / CSS / JavaScript. I am practicing making a webpage and trying to get out of the tutorial swamp by getting my hands dirty.
I've made one webpage I'm happy with and this is my second one. My problem I believe is with my .png image in my html file as when it loads in it loads very large and makes the page overflow by a lot. Even after changing the width and adding a overflow: hidden; it takes away the scroll bars but the page is still messy.
I've tried the overflow: hidden; on the html, body{} and the img tag itself. I will provide my code and photos of the page currently to show you the issue. In the meantime overflow hidden will be turned off.
(There's a photo of the page in the link). Code posted below
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1170px;
margin: auto;
}
img {
max-width: 200px;
max-height: 200px;
}
header {
background-color: purple;
background-image: url(../imgs/mountains.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Practice2 page</title>
<link rel="stylesheet" href="stylesheets/practice2.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
<img src="imgs/image1.png" alt="logo" width="200">
</div>
<ul class="nav-bar">
<li>HomePage</li>
<li>About Me</li>
<li>Contact Me</li>
<li>News</li>
</ul>
</div>
<div class="hook">
<h1>DeadInside</h1>
Learn More
</div>
</header>
</body>
</html>
The problem is with your .wrapper class, it has padding:1170px and that causes the wrapper elem to be way bigger that the body
Try as this
.wrapper {
padding: 10px;
margin: auto;
}
You can use the padding in all the diorections with the
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
More about this property on W3Schools
I'm building a website for class, based on a provided template, and I'm struggling to make it so that my text will move as the window gets resized (right now, resizing the window obscures the text and associated buttons).
Ideally, I'd like for the page to be anchored in such a way that the focus remains on the text/buttons - and by extension, the bottom right corner of the image - as the window is resized.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- This tells mobile devices not to zoom out the page, start with scale=1 -->
<link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/grid.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css">
<link rel="stylesheet", type="text/css", href="Resources/css/style.css">
<link rel="stylesheet", type="text/css", href="Resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Whitetail Acres Tree Farm</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food Delivery</li>
<li>How it Works</li>
<li>Our Cities</li>
<li>Sign up</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
<div class="hero-text-box">
<h1>Schedule <br> Your Visit!</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
And here is my CSS:
/* Universal Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
background-color: #ffffff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
header{
background-image: url(img/hero.jpg);
background-size: cover;
background-position:bottom, right;
height: 100vh;
background-attachment:inherit;
}
.hero-text-box{
position: absolute;
width:1080px;
top:80%;
left:55%;
text-align: right;
transform: translate(-50%, -50%);
}
.row{
max-width: 1140px;
margin:0 auto;
}
section{
padding: 80px 0;
}
.box{
padding: 1%;
Looks like you havent defined a width for the row.
Try something like:
.row{
max-width: 1140px;
width: 100%;
margin:0 auto;
}
When I do web applications I love to use bootstrap. It gives me a bunch of css classes out of the box that help me create a responsive frontend that will do what I need it to on any screen size. Long story short, I would use media queries, the bootstrap layout grid, or a combination of both.
There are many tutorials on youtube. This guy shows how the basics work for the bootstrap layout grid. https://youtu.be/GDwWmrpCa30
Media queries are useful when you need your UI to do something different based on the current device screen size. This can be used without the need for bootstrap, but can also be used with bootstrap to make really responsive apps. There are also countless tutorials on youtube for that also, but here is a good one to check out. https://youtu.be/2KL-z9A56SQ
Media Query Example:
#media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
Let me know if I can be of further assistance. Good luck.
When setting an exact width to an absolutely positioned element, you should expect that it will stay at that width, regardless of browser size.
.hero-text-box{
position: absolute;
top:80%;
left: 49%;
text-align: right;
transform: translate(-50%, -50%);
max-width: 1080px;
width: 100%;
}
Also, the left value should be less than 50% because of the transform rule that moves it off screen.
I coded two 'one page websites' on codepen for a project (the second one is not finished, the nav needs a little more code to look proper).
Looking at my code there is not much difference, so I don't see why the second page looks rubbish on mobile devices?
I can scroll left to right and can't see the whole size of the page and not zoom out enough to do so.
Working First One
Not Working Second One
(Note: I used Bootstrap for these)
body {
font-family: Raleway;
background-image: no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #92b8db;
color: white;
display: block;
margin: 0;
}
h1 {
text-align: center;
font-size: 70px;
margin: 2% 0 3.5% 0;
text-transform: uppercase;
}
nav {
text-align: center;
display: inline-block;
margin: 25px;
float: none;
overflow: none;
}
li,
ul {
text-decoration: none;
display: inline-block;
margin: 5px 20px;
}
h2 {
margin: 25px 0 0 20%;
}
p {
font-size: 20px;
margin: 5px 10% 20px 10%;
text-align: justify;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" , user-scalable=no>
<body background="http://static.tumblr.com/38d4fa35aa182890b82bb598a50c8d8b/hti7sqq/7h2orgi26/tumblr_static_4g8ybvq3e4ys8sk4sgowscko8.jpg">
<div class="container-fluid">
<div class="row">
<div class="col">
<h2>Heartcube</h2>
</div>
<div class="col">
</div>
<div class="col">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid container">
<h1> Betti Bremm</h1>
<p>
We are giants...
</p>
</div>
</div>
</body>
The reason you can't "zoom" is because you have user-scalable set to "no" - if you remove that part you should be able to.
If you just leave the viewport meta at
meta name="viewport" content="width=device-width, initial-scale=1">
this should suffice.
The meta for the user-scalable is only set in the settings for the HTML on the site that doesn't work in your codepen (it doesn't seem to take into account the manual head meta settings in the codepen). Your bootstrap is also included twice in this codepen.
Hope this helps
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;