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.
Related
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.
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
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;
Hello apologies for what may come across as a silly question as I am still fairly new to HTML & CSS. I want to avoid using Javascript if possible to solve this solution.
My issue is the text "Still working on it". On the various laptops / desktop screens and android phones tested I've had no issue with it the entire text field being centered. However on iphones I am assuming that it centers the first letter of the string "S"? Below is an example of what it looks like on iphone devices:
Below is my HTML and CSS code respectively, if anyone could guide me in the right direction to sorting this issue I would very much appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Still working on it</h1>
</div>
<footer class="mainFooter">
<div class="socialmediaFooter">
<img class="focus" src="facebook.png"</img>
<img class="focus" src="instagram.png"</img>
<img class="focus" src="linkedin.png"</img>
</div>
</footer>
</body>
</html>
and
html
{
background: url("devbc.jpg") no-repeat center center;
min-height:100%;
background-size:cover;
}
body
{
text-align: center;
min-height:100%;
}
.bc h1
{
text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax;
position: fixed;
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}
img
{
max-height: 10vmax;
max-width: 5vmax;
}
The website is:
https://eliasmalik.com
I'm not sure if it will fix it on your phone, but try to take out the left:51% and your transform property on your .bc h1 css and instead add a width:100%
I want to create a fluid design with header (full-with), big image slideshow on the left and 4 images as sidebar.
I want to make the sidebar 100% height, with 4 images (which will act as buttons). The height should always be 100%, so no scroll. Width should automatically change when resizing browser.
But I couldn't get it done. Do you have any suggestion?
Fiddle
Thank you very much!
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<style type="text/css">
body {
background-color: #fff;
padding: 0;
margin: 0;
font-family: "Droid Sans", sans-serif;
width: 100%;
}
div#links {
float: left;
}
div#rechts {
float: right;
display: block;
height: 90%;
background-color: grey;
}
div#rechts img {
height: 25%;
width: auto;
clear: both;
}
div#cat {
float: right;
clear: both;
}
header {
height:10%;
font-size: large;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<header id="header">header</header>
<div id="links">
Content left side
</div>
<div id="rechts">
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
</div>
</div>
</body>
</html>
Use bootstrap 2 or 3 for making fluid and responsive websites simple and easy to use once get hang of it you can pretty much do anything with bootstrap you can easily div them in to separate grids to do the way you would like.
CSS-Tricks is a great place to start more user friend forum also can search post your message in there but also show code sample what your trying to achieve