I am incredibly new to html and css, so please bear with me. I am attempting to make a website for two airbnb listings, and the webpage looks fine on a computer: Display on Webpage Here
However, on mobile, everything looks completely different: Display on Mobile Here
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
text-align: center;
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
flex-direction: column;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" style="width:450px;height:300px;margin:auto">View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" style="width:450px;height:300px;margin:auto">View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
</div>
<div class="row">
<div class="column">
Learn More
</div>
<div class="column">
Learn More
</div>
</div>
</body>
</html>
Is there any way that I can make it so this doesn't occur and the mobile browser looks similar to the desktop? What are my alternatives if this is impossible?
I'd recommend using flexbox instead of floats, which are an older and less efficient way to do your layout. In the code below I stacked the airbnb frames vertically for mobile and tablet view, then horizontally for desktop like you had them. I had to rearrange some of your html code to achieve this, and use media queries. It was easier for me to use style tags to add the CSS for this example. I also had to change the width of the airbnb-embed-frame and remove the inline style rules in the html for that, as the 450px width was causing problems with the layout in mobile view. I tried to put the code in the example setting for the answer but it wasn't showing the airbnb frames. I hope this answer is satisfactory, this is kind of my take on how I'd like to make it look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<style>
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (min-width: 1024px) {
.row{
display: flex;
justify-content: space-around;
}
}
.airbnb-embed-frame{
width: 300px;
margin: auto;
}
#media (min-width: 768px) {
.airbnb-embed-frame{
width: 450px;
}
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column-2{
margin: 30px;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" >View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" >View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
What is a clearfix?
(10 answers)
background color in css not showing up
(2 answers)
Closed 1 year ago.
There is a logo in the bottom right, which I removed the link because it will not get the image due to where its located. Aside from that, the background behind it and the <div class="green"></div>is supposed to be colored with #104723; but it will not apply it?? Why is that?
I applied the color style as well as the background-color style and nothing happens, even if I include the !important tag.
.green{ color: #104723;}
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
padding: 0px auto;
margin: 0px auto;
height: auto;
min-height: 10%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#MSOZone {
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
line-height: 0;
font-size: 0;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
display: block;
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.ms-wpContentDivSpace {
height: auto !important;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.ms-webpartPage-root{
border-spacing:0px!important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
#contentRow {
width: 101%;
}
.flexbox-container {
margin-top: -30px;
width: 100%;
height: 100%;
}
html, body {margin: 0; height: 100%; overflow-x: hidden !important; overflow-y: hidden !important;}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Projects Landing Page</title>
<link rel="stylesheet" href="css/site.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Active Projects Site</h1>
<h1 class="gold">Going Beyond</h1>
<div class="selector">
<a href="" target="_blank" class="btnselect">USMC Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">Army Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
Contract 5
Contract 6
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">DoD Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
</div>
</div>
</div>
</div>
<div class="green">
<img src="" class="logo"/>
</div>
</body>
<script>
document.getElementsByTagName('title')[0].innerText = "Projects Landing";
</script>
</html>
.green{ color: #104723;}
sets the text color to green. There's no text in that div, so you don't see a change.
.green{ background-color: #104723; }
sets the background color to green, which is probably what you want.
Additionally, if the div takes up no space, none of this will make a difference. You'll want to make sure there's visible content in it too -- an img with no source is not that.
Use backgound-color to apply color in backgrounds.
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I can't get the dropdown to align in the same row as the rest of the bar (code below). I tried working with margins and paddings but that doesn't help either. Any guidance would be appreciated.
I need the drop-down menu to be on the right corner of the bar. You don't have to do the code for me, but I am trying to figure if there are two different styles intersecting each other and causing this or what should I do next?
* {
margin: 0;
}
body {
background-color: #f2f2f2;
font-family: "Verdana";
}
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
}
.back {
border-radius: 13px;
font-family: "Verdana";
text-align: left;
color: #ffffff;
float: left;
font-size: 16px;
background: #7c7c7c;
padding: 10px 26px 10px 26px;
border: none;
display: inline-block;
margin-top: 10px;
margin-left: 10px;
}
.title {
text-align: center;
margin-right: 95px;
}
h1 {
text-align: center;
}
.topText {
font-size: 38px;
line-height: 270px;
color: #ff7200;
}
.bottomText {
line-height: 280px;
font-size: 38px;
color: #ff7200;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: right;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="headDivider">
<button type="button" class="back">Back</button>
<h4 class="title"> Viking Vote + </h4>
<div class="dropdown" style="text-align:right;">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
As one of the variants is to use flexbox for headDivider
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
display: flex;
justify-content: space-between;
align-items: center;
}
Here is the fiddle with this solution and small fixes for other elements
<div class="headDivider">
<div style="float:left;">
<table>
<tr>
<td>
<button type="button" class="back">Back</button>
</td>
<td>
<h4 class="title"> Viking Vote + </h4>
</td>
</tr>
</table>
</div>
<div style="float:right;">
<table>
<tr>
<td>
<div>
<button class="dropbtn">Dropdown</button>
</div>
</td>
<td>
<div class="dropdown" style="text-align:right;">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
I have a problem concerning responsitivity. I want this symbol "=" to hold all the menu when the screen is smaller(let say 1000px). I know I have to use responsitivity but I don't know how.
This is my index:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Tagesmutter Kiel</title>
</head>
<body style="background-color: #41430e">
<!--a href="javascript:void(0);" class="icon" onclick="allLinksInOneDiv()">☰</a-->
<div id="menu">
<div class="icon-bar">
<a class="active" href="index.html"><i class="fa fa-home"></i></a>
</div>
<div class="dropdown_wohnen">
<button class="dropbtnWohnen">Wohnen</button>
<div class="wohnen_content">
Eingenwöhnung
Konzeption
</div>
</div>
<div class="dropdown_betreung">
<button class="dropbtnBetreung">Betreungskosten</button>
<div class="betreungskosten_content">
Betreuungskosten
Freie Plätze
Bilder
</div>
</div>
<div class="dropdown_tag">
<button class="dropbtnTag">Tagesablauf</button>
<div class="tag_content">
Tagesablauf
Tageskinder
Gästebuch
</div>
</div>
<div class="dropdown_kontakt">
<button class="dropbtnKontakt">Kontakt</button>
<div class="kontakt-content">
Kontakt
Urlaub
Über mich
</div>
</div>
</div>
<div class="banner">
<img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>
<div class="info">
<h1>Hallo, liebe Eltern! </h1>
<p style="
padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>
Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick
in meine Arbeit als Tagesmutter ermöglichen kann. ☺ </p>
<h5>Tagesmutter Irene</h5>
</div>
</body>
</html>
And now the stylesheet:
#menu
{
background-color: #78409a;
display: flex;
margin-top: -2%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
}
.icon-bar { margin-right: 0.2%;}
.icon-bar a
{
float: right;
color: white;
font-size: 710%;
}
.active {background-color: #4CAF50;}
.dropdown_whohnen
{
position: relative;
display: inline-block;
}
.dropbtnWohnen
{
background-color: #4CAF50 ;
color: white;
padding: 33.25%;
font-size: 100%;
border: none;
cursor: pointer;
}
.wohnen_content
{
display: none;
position: absolute;
background-color: #d5416e;
min-width: 13.2%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.wohnen_content a
{
color: black;
padding: 6% 6%;
text-decoration: none;
display: block;
}
.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}
.dropdown_betreung
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnBetreung
{
background-color: #4CAF50 ;
color: white;
padding: 24.7%;
font-size: 100%;
border: none;
cursor: pointer;
}
.betreungskosten_content
{
display: none;
position: absolute;
background-color: #DAF7A6 ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.betreungskosten_content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}
.dropdown_tag
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnTag
{
background-color: #4CAF50 ;
color: white;
padding: 29.2%;
font-size: 100%;
border: none;
cursor: pointer;
}
.tag_content
{
display: none;
position: absolute;
background-color: #78409a ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.tag_content a
{
color: black;
padding: 5% 5%;
text-decoration: none;
display: block;
}
.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}
.dropdown_kontakt
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnKontakt
{
background-color: #4CAF50 ;
color: white;
padding: 34.09%;
font-size: 100%;
border: none;
cursor: pointer;
}
.kontakt-content
{
display: none;
position: absolute;
background-color: #12d3df;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.kontakt-content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}
.banner
{
height: 270px;
margin-left: 15%;
margin-right: 10%;
width: 68%;
background-color: white;
}
.mySlides {display:none;}
.info h1, h5, h3
{
font-family: 'Tangerine';
font-size: 78px;
text-shadow: 10px 10px 10px #aaa
}
.info
{
background-color: #a6debb;
margin-top: -4%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
font-family: 'Helvetica', serif;
font-size: 40px;
text-shadow: 22px 22px 22px #aaa;
}
.info p
{
padding-left: 10px;
font-family: 'Helvetica', serif;
font-size: 25px;
text-shadow: 22px 22px 22px #aaa;
}
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th
{
border: 1px solid #9a1838 ;
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
#map
{
margin-left: 9%;
width: 80%;
height: 400px;
background-color: grey;
}
Please, can you help me with this? And I also have a display different depending on the browser ( Firefox vs chrome).
Based on your question it seems you want to build a mobile navigation menu that opens when clicking the symbol "=".
You need to do the following:
- HTML: Add a list within an unordered list, to hold the anchor links. This is the navigation text you will see when it is expanded. Attach an onclick functionality that will be used in below javascript.
- CSS: Style your navigation menu.
- Javascript: Create a function that reacts on the HTML onclick. This function will expand your navigation menu. Your function should be able to toggle the menu, meaning that same button should be able to open/close the menu.
...if your need further assistance please create a code snippet.