I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!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">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed last year.
I know this is a stupid question, but I'm having trouble with the small screen media query. I gave the image a class, so it should work. Also, when I tried to add an id, it didn't work, so is there something wrong with my code or the media query thing? Any assistance or advice would be greatly appreciated.
#media only screen and (max-width : 600px){
.mondaycont .monday{
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont{
width: 84%;
}
.mondaycont .monday{
position: relative;
width: 40em;
margin-top: 20px;
}
.mondaytext{
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold{
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>body{background-color: #262626;}</style>
<div class="container text-center"><p class=" mondaytext">This page feels like a monday...</p>
<p class=" mondaytextbold">Go Home</p> </div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
Your media query is followed by a declaration that applies to all resolutions, overwriting your media query width definition. Media queries do not affect specificity, so the normal "last rule wins" applies.
Exchange the position of these two rules:
.mondaycont .monday {
position: relative;
width: 40em;
margin-top: 20px;
}
#media only screen and (max-width: 600px) {
.mondaycont .monday {
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont {
width: 84%;
}
.mondaytext {
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold {
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>
body {
background-color: #262626;
}
</style>
<div class="container text-center">
<p class=" mondaytext">This page feels like a monday...</p>
<a href="./index.html">
<p class=" mondaytextbold">Go Home</p>
</a>
</div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.
Navigation Picture
body{
margin:0;
padding:0;
}
.header{
background-color: salmon;
height: 100px;
}
.header img {
float: left;
width: auto;
height: 100%;
}
.header h1 {
margin-top: 0px;
padding-top:10px;
left: 10px;
}
ul li{
display: inline;
font-weight: bold;
align-items: center;
}
li a{
align-items: center;
}
<!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">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.
A generally easier way to design this layout would be using flexbox , then you can use things such as align-items.
If you're interested in more about that, then here is a good place to start.
Please see below an example using flexbox.
body {
margin: 0;
padding: 0;
}
.header {
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
}
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>
Here is solution for your query.
You will have to add CSS in header class instead of ul li & li a.
.header{
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
}
<!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">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
Toggle icon menu not showing when I reduce screen below 768px.
I can only see 'Website title'. Any ideas? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox Dropdown Menu</title>
<style>
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 8px;
}
.Navbar__Items {
display: flex;
}
.Navbar__Items--right {
margin-left: auto;
}
.Navbar__Link-toggle {
display: none;
}
#media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display: none;
}
.Navbar__Items--right {
margin-left: 0;
}
.Navbar__ToggleShow {
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}
</style>
</head>
<body>
<div class="Navbar">
<div class="Navbar__Link Navbar__Link-brand">
Website title
</div>
<div class="Navbar__Link Navbar__Link-toggle">
<i class="fas fa-bars"></i>
</div>
<nav class="Navbar__Items">
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
<nav class="Navbar__Items Navbar__Items--right">
<div class="Navbar__Link">
Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
</div>
</body>
<script>
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
.addEventListener('click', classToggle);
</script>
you should also define .Navbar__Link-toggle in media query that you want to show toggle icon like this
#media only screen and (max-width: 768px) {
.Navbar__Link-toggle {
display: block;
}
}
and
included this in <head> tag <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
I'm having issues with my menu icon. For my desktop css I have is set to display none. Under 1000px I have it set as display block. So far the icon is showing for all devices. Any assistance is appreciated.
/* blah blah blah */
.icon-dropdown {
display: none;
}
#media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<img src="vintagelogo.jpg" width="90px" height="90px">
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li>ABOUT MCDONALD'S</li>
<li>OUR CLASSICS</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
try to use this media query:
#media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
After that, try to shrink your browser to see the effect.
Try setting width and height for the icon.
I am new to the world of XHTML and CSS. I put together a page that requires 3 column layout. The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code.
I have posted the code for it before it worked and after applying the necessary changes to make it work.
Questions
Is this the correct way to code it?
Is it the best way to code?
What issues can I run into with the code?
Before it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: auto;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
After it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: hidden;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
width: 100px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
The code is pretty much ok - few things you may do:
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look.
2.) margin: 0px; does not need the px with it - do margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. #subnav might be a better choice.
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example):
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job.
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it.
I won't comment on meta tags since I don't have enough knowledge about it.
A few comments with regards to meta tags...
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless.
<meta name="keywords" content="" />
The meta keywords used to matter. No search engines bother with it anymore as it's always abused.
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. The content within the page should all the describing for you.