So I have trouble trying to complete these two requirements.
My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.
The height of the welcome section should be equal to the height of the viewport.
I thought I would have already cleared them but somehow the script in codepen says I haven't. So I'm not sure if I did what I was supposed to.
Any help is greatly appreciated!
#projects {
margin-top:1000px;
}
#navbar{
display:flex;
align-items: center;
justify-content:center;
top:0;
width:100%;
position: fixed;
}
#welcome-section{
height:100vh;
font-size:100px;
}
#body {
margin-top: 100px;
}
#media screen and (max-width:768px){
#navbar {
font-size:10px;
}
}
<html>
<nav id="navbar">
<div id="logo">
<h2>PORTFOLIO</h2>
</div>
<ul id="navlinks">
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<body id="body">
<welcome id="welcome-section">
<h1> Welcome! </h1>
</welcome>
<div id="projects">
<a class="project-tile" href="https://codepen.io/imsmoothlikebutter/pen/BaQeWwO" target="blank"> Project example </a>
</div>
<div>
freeCodeCamp
</div>
</body>
</html>
you should add following tag in your html code -
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In tag use target as "_blank" instead of "blank"
In #media query you need to specify what happens to specific html element when viewport size is as per your declared size for that #media query
ex.-
#media screen and (max-width:768px){
#navbar {
font-size:10px;
}
#body{
height:400px;
}
}
Related
I've been learning HTML/CSS for about two weeks.
I've been making dummy websites just for practice and I've been struggling lately with a header problem. I will post code/pictures to help be as specific as I can.
I'm attempting to head a header on my web page with a solid background color going across the top, then a logo(title) on the left hand side of the header and a nav/search bar on the right hand side all within a container of 1020px.
Everything seems to look fine full screen but when I make my browser half width it seems to make my nav/search bar go off the screen on the right hand side and when I scroll over the header background color is missing.
I'm unsure why it's doing this so if someone has a fix could you explain to my not only why it's doing this but how/why I need to do what I need to do to fix it. Thank you so much!
My HTML file
<html>
<head>
<title>Dummy Site</title>
<link rel="stylesheet" type="text/css" href="stylez.css">
</head>
<body>
<header>
<div class="container">
<div id="logo">
<h1>Another Dummy Site</h1>
<em>Just another dummy web page</em>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<form>
<input type="search" placeholder="search 4 somethin">
</form>
</div>
</div>
<div class="clearfix"></div>
</header>
</body>
</html>
CSS:
*{
margin: 9;
padding: 9;
}
body {
font-family: monospace, sans-serif;
width: 109%;
background: #ccc;
}
header{
background: #fc9;
}
.container{
width: 1020px;
margin: 9 auto;
}
#logo{
float: left;
}
#nav{
float: right;
}
.clearfix::after{
content:"";
clear: both;
display: table;
}
Here is a pic of the site in full screen
Here is a pic of it in the browser half screen - notice the scroll bar and cut off on the right.
Here is a pic of when I scroll to the right
try this
.container {
max-width:1020px;
width:100%;
margin:0 auto;
}
jsfiddle
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 am beginner level front end developer i need help in psd to html when I slice
the image its size is 1920px and in html, div size is 100% but image is going out of the browser. What are my mistakes kindly help me what should I have to do to make it good I want to learn PSD to html.
Also guide me how to use slice tool in adobe Photoshop ?
html, body { margin: 0px; padding: 0px; border: 0px; }
#wrap{
width: 1920px;
background-color: #e7e7e7;
}
.menu{
width: 100%;
background-color: #202628;
}
.slider{
width: 100%;
}
<html>
<head>
<title>psd to html</title>
<meta charset="utf-8" content="text/html" http-equiv="content-type">
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<header>
<ul class="menu">
<li>SiteName</li>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="slider">
<img src="images/banner.png" alt="banner">
</div><!-- end slider-->
</header><!--end header-->
</div><!-- end wrap -->
</body>
</html>
You should add css for image tag and also remove fix width of your #wrap and apply max-width.
Try this:
#wrap{
max-width:1920px;
width:100%;
}
.slider img{
width: 100%;
max-width:100%;
}
For some reason my footer is floating in the middle of the page. Driving my mad. I hope its just a quick fix. Ive looked online and all the answers seem to point to having a fixed footer and i dont want that as it displays horribly in smaller resolutions.
<!DOCTYPE html>
<html>
<head>
<title>MM Web Design</title>
<meta name="viewport" content="width=500, initial-scale=1">
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<img class="logo" src="img/logo.png">
<div class id="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
<br>
</div>
<div class="wrapper">
<h1>Welcome to my Portfolio</h1>
<p>
yada yada yada
</p>
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
<div class="footer-wrap">
<div class="footer">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.footer-wrap{
height:50px;
width:100%;
background:#333333;
margin: 0em;
}
.footer ul {
font-size: 18px;
font-weight: lighter;
list-style-type: none;
margin: 100px;
padding: 0;
text-decoration: none;
}
.footer ul li {
float: right;
display: block;
padding-left: 20px;
font-size: 0.75em;
}
Most likely, it's just displaying below the other divs.
Try sticky footer?
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
and css
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
The divs are behaving exactly as they should be? And they are correctly ordered.
As soon as you fill content into the preceding div the footer will move down
If you want it to stay at the bottom of the window then it needs to be sticky as has already been suggested.
I'm trying to make a banner that fills all the screen horizontally but it isn't working as expected. There's some space that isn't fullfilled with it like you can see here: http://i.imgur.com/12NrL7R.png
I'd appreciate some help, thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Best webpage ever</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="banner">
<ul id="menu">
<li>Home</li>
<li>Students</li>
<li>XXX tuga</li>
</ul>
</div>
<div id="container">
<div id="content">
<p>cona</p>
</div>
</div>
<div class="banner">
</div>
</body>
</html>
.banner{
background-color: black;
width: 100%;
height: 200px;
}
html, body {
margin:0;
padding:0;
}
Try this, the body/html by default has padding, so you might want to try to remove that...
body tag applies some spacing in most browsers. Be sure to have:
body {
margin: 0;
padding: 0;
}
add this to your css:
body{
padding:0px;
}
let me know if that helps