Building a website for my company, first one. And I’m having trouble getting the navigation bar to be horizontal, and placed in the top right corner of the browser.
The whole top section is a <div> (similar to the StackExchange site), and I currently have three elements floating to the top left (logo, name, tagline).
I’m trying to get the navigation bar horizontal and floating to the right, except I can’t locate it there. It keeps appearing outside of the black bar, and beneath the three left floating elements.
HTML code:
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"</div>
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>
<!-- <div class="bif">
<div class="bif2">
<div id="p1" class="block"></div>
<div id="p2" class="block"></div>
</div>
</div> -->
<ul class="navi">
<li>Home</li>
<li><a href="/about.html" >About</a></li>
<li><a href="/services.html" >Services</a></li>
<li><a href="/pricing.html" >Pricing</a></li>
<li><a href="/contact_us.html" >Contact Us</a></li>
</ul>
</div>
</div>
CSS code for the three left floating elements and the navigation thus far:
.part1 {
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo {
width: 50px;
height: 50px;
float: left;
overflow: visible
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: left
}
.headtag img {
width: 100%;
height: 50px
}
.tagline {
width: 220px;
float: left;
margin: -50px 0px 0px 220px;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li {
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Any help would be greatly appreciated. It’s completely frustrating. If you would like reference as to what I’m trying to do, refer to http://johnnycupcakes.com/.
Style your li so they are display:inline;. They will sit side by side. Also you need to remove your float:left on the li;
.navi li{
display: block;
position: relative;
/*float: left;*/
margin: 0px 5px;
overflow: hidden;
display:inline;
}
You were also missing a closing tag on your img;
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"/></div><!--Closed image tag-->
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>
The line <div class="headtag"><img src="/Images/title.png"</div> has to be changed to
<div class="headtag"><img src="/Images/title.png"/></div> you forgot to close off the image tag.
as well as this, change your css to the following:
.part1{
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo,.headtag,.tagline{
display:inline-block;
background-color:green;
}
.logo {
width: 50px;
height: 50px;
float: right;
overflow: visible;
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: right;
}
.headtag img {
width: 100%;
}
.tagline {
width: 220px;
float: right;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li{
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Have a look at this fiddle
This should do the trick... let me know if this is what your looking for.
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<nav>
<div>
<div id="logo">LOGO</div>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact_us.html" >Contact Us</a>
</div>
<div>
Sign Up
Sign In
</div>
</nav>
<section id="content"></section>
<footer></footer>
</body>
</html>
//CSS
body{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
margin: 0 !important;
height: 100vh;
width: 100vw;
overflow: scroll;
}
nav{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 60px;
z-index: 999;
position: fixed;
background: #1E67CB;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
}
#logo{
display: -webkit-flex;
display: flex;
cursor: default;
-webkit-align-self: center;
align-self: center;
margin-left: 1em;
color: #fff;
font-weight: bold;
font-size: 1.15em;
line-height: 1.43;
-webkit-font-smoothing: antialiased;
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
width: 50vw;
display: -webkit-flex;
display: flex;
}
nav>div:nth-of-type(1){
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
nav>div:nth-of-type(2){
-webkit-justify-content: center;
justify-content: center;
}
nav>div:nth-of-type(3){
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
nav>div>a{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
text-decoration: none;
cursor: pointer;
color: #fff;
font-size: 1em;
font-weight: 300;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
margin: 0 .5em;
padding: 0.6em 1.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
nav>div>a:hover{
background: rgba(255,255,255,0.15);
}
nav>div>a:active{
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
background: rgba(255, 255, 255, 0.15);
}
nav>div>a:nth-of-type(2):hover{
background: rgba(255, 255, 255, 0.37);
}
#content{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 200vh;
}
footer{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 100px;
bottom: 0;
background: #5c5c5c;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
Related
I'm making a car research/ranking website using React. Coming to the issue, I have 3 cards, with content on it once you hover over it.
It works perfectly well in desktops, but it doesn't properly show content in smaller devices: it overflows to the other section.
To fix this, I have added a media query to it, but it doesn't work either.
Please check my code:
.sec2 {
height: 100vh;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(https://static.feber.se/article_images/48/81/62/488162_1920.jpg)
no-repeat top center;
}
.wrapper {
display: flex;
width: 90%;
justify-content: space-around;
}
.card {
width: 350px;
height: 370px;
border-radius: 15px;
padding: 1.5rem;
position: relative;
object-fit: fill;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 2rem;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}
#media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 270px;
padding: 1rem;
width: 250px;
margin-bottom: 10px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 15px;
}
.card .info button {
padding: 0.4rem;
font-weight: normal;
font-size: 12px;
}
}
#media (max-width: 600px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 15%;
padding: 0.3rem;
width: 180px;
margin-bottom: 5px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 10px;
}
.card .info button {
padding: 0.3rem;
font-weight: normal;
font-size: 10px;
}
}
And
<div>
<header className="sec2" id="section2">
<h1>
What is in this website?
</h1>
<div class="wrapper">
<div class="card">
<img src="https://cdn.jdpower.com/JDPA_2022%20Genesis%20G70%20Red%20Front%20Quarter%20View.jpg" />
<div class="info">
<h1>Car Rankings</h1>
<p>
It contains cars ranked based on body type, done after
comprehensive research.
</p>
<button>Go</button>
</div>
</div>
<div class="card">
<img src="https://i0.wp.com/autonxt.net/wp-content/uploads/2018/01/autocontentexp.com2018-Lincoln-Navigator5-5b1aebecc618f268352b037fb2253a291d670994-1.jpg?resize=2500%2C1500&ssl=1" />
<div class="info">
<h1>Car Reviews</h1>
<p>Contains reviews of selective cars written by us.</p>
<button>Read More</button>
</div>
</div>
<div class="card">
<img src="https://static0.hotcarsimages.com/wordpress/wp-content/uploads/2020/09/AWD-e1600115646672.jpg" />
<div class="info">
<h1>Used Cars/h1>
<p> We rank used cars so that you will only get the best out of it.
</p>
<button>Read More</button>
</div>
</div>
</div>
</header>
</div>
Image in computer: click, and
Image in smaller devices: click
first add the margin: auto in .wrapper class and some margin: 5px; to .card class because this make content in the center and looks good.
.wrapper {
display: flex;
width: 90%;
margin: auto;
justify-content: space-around;
}
.card {
/* your code */
margin: 5px;
}
Now, add just update margin: 15px; of all .card instead of margin-bottom
Here is the full code, https://codesandbox.io/s/laughing-gwen-4i47v5?file=/src/Home.jsx
I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});
You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>
I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>
I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag
When I decrease my screen size the buttons start to overlap, i was hoping to decrease the breakpoints so that when i decrease the screen size the buttons will collapse. All of my buttons eventually fall into place however i was just wanting them to change as the screen moves. Any help on this would be appreciated, thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid example</title>
<link rel="stylesheet" href="style/styles.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="grid">
<header>Manchester United F.C.</header>
<figure> <img src="images/untlogo.png" style="width:60px;height:60px" >
</figure>
<nav id="menu-nav">
<div class="menu">Menu</div>
<ul>
<li>Home</li>
<br>
<li>FAQ</li>
<br>
<li>Form</li>
<br>
<li>Links</li>
</nav>
<main class="main-home">
<div class="wrapper-home">
<div class="wrapper-button">
<section class="home-left">
<a href="https://www.manutd.com/en/news/first-team">
<article class="ole">
<img src="images/ole.jfif" alt="Ole">
<div class="text-wrap">
<h4>Team News</h4>
<p>"Ole Gunnar Solskjaer has freshened up his United side to face
Reading in the Emirates FA Cup".
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/marcus-rashford-learning-
from-solskjaer-and-ronaldo">
<article class="rash">
<img src="images/rash.jfif" alt="Rash">
<div class="text-wrap">
<h4>Rashfords Breakthrough</h4>
<p>" Why Rashford had shades of Solskjaer and Ronaldo in his game at
Newcastle"
</p>
</div>
</article>
</a>
</section>
<section class="home-right">
<a href="https://www.manutd.com/en/news/detail/vote-for-man-united-goal-
of-
the-month-for-december-2018">
<article class="goals">
<img src="images/goals.jfif" alt="goals">
<div class="text-wrap">
<h4>Goals from the month</h4>
<p>"Watch the eight United goals on our shortlist for December and
cast your vote."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/first-team">
<article class="players">
<img src="images/team.jpg" alt="Players">
<div class="text-wrap">
<h4>Player Profiles</h4>
<p>" Click here to look at the offical 2018/19 Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/paul-pogba-wins-man-utd-
player-of-the-month-award-for-december-2018">
<article class="potm">
<img src="images/potm.jpg" alt="POTM">
<div class="text-wrap">
<h4>Player of the Month</h4>
<p>"Fans have picked Paul Pogba as United's top performer of the past
month."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/ole-gunnar-solskjaer-on-
the-
new-year-and-facing-newcastle-united">
<article class="newyear">
<img src="images/newyear.jfif" alt="NewYear">
<div class="text-wrap">
<h4>Ole's 2019 Plan</h4>
<p>" Ole tells MUTV why he thinks this new year will be enjoyable for
fans"
</p>
</div>
</article>
</a>
</section>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/women">
<article class="women">
<img src="images/women.jfif" alt="Women">
<div class="text-wrap">
<h4>Womens Team</h4>
<p>"Click here to look at the offical 2018/19 womens Manchester United
squad!"</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/reserves">
<article class="newyear">
<img src="images/u23s.jpg" alt="u23s">
<div class="text-wrap">
<h4>u23s Team</h4>
<p>"Click here to look at the offical 2018/19 u23s Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/legends">
<article class="legends">
<img src="images/legends.jpg" alt="Legends">
<div class="text-wrap">
<h4>Manchester United Legends</h4>
<p>"Click here to look at all of the past Manchester United legend
players"
</p>
</div>
</article>
</a>
</div>
</main>
<nav id="menu-nav2">
</nav>
<script src=".js/script.js"></script>
</body>
</html>
**Style sheet**
* {
padding: 0;
margin: 0;
border: 0;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
}
body {
margin: 0;
font-family: Avenir, Helveltica, Arial, san-serif;
font-weight: bold;
font-size: 1.5rem;
color: black;
background-image: url("../images/stad.jpg");
background-size: cover;
}
/* use of * wildcard selector known to be slow so only for demo! */
body > * {
padding: 1em;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns:repeat (5, 1fr);
grid-template-rows: repeat(5, 1fr);
/*grid-gap: 6px; */
grid-template-areas:
"header header"
"menu menu";
}
header {
grid-area: header;
background: darkred;
box-shadow: 0px 4px 5px 0px darkred;
color: white;
}
.menu {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#menu-nav2 {
grid-area: side;
background-image: url("../images/pogba3.png");
background-size: cover;
box-shadow: -5px -30px 5px 0px darkred;
}
nav {
grid-area: menu;
margin: 0;
padding: 0;
background: darkred;
box-shadow: 4px 0px 5px 0px darkred;
}
nav a {
text-decoration: none;
color: white;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
}
nav li {
height: 20px;
width: 100%;
text-align: center;
transition: box-shadow 1s;
}
nav ul li a {
padding: 0;
margin: 0;
}
nav li:hover {
box-shadow: inset 0 -100px 0 0 black;
color: black;
}
nav li:hover a {
color: darkred;
}
figure {
grid-area: figure;
background: darkred;
margin: 0;
padding-top: 10px;
text-align: center;
}
figure img {
height: 50px;
width: 50px;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
/*height: 25vh;*/
}
/* Start of form */
.main-form {
width: 100%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
}
form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #C2C2C2;
width: 25%;
height: 600px;
padding: 1%;
box-shadow: 0 5px 20px black;
}
.form {
width: 400px;
}
.form_name {
width: 90%;
}
.email {
width: 90%;
}
.enquiry {
width: 90%;
height: 20%;
margin: 3%;
}
.button_form {
width: 20%;
height: 6%;
cursor: pointer;
}
#media screen and (min-width: 300px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10vh 50vh 50vh ;
grid-template-areas:
"figure header header"
"menu menu menu "
"content content content"
"content content content"
"side side side";
}
}
#media screen and (min-width: 600px) {
.grid {
grid-template-columns: 1fr 9fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 10vh 100vh 1vh;
grid-template-areas:
"figure header header"
"menu content side"
"menu content side";
}
}
nav {
justify-content: flex-start;
}
nav a {
padding: 1em;
}
input {
margin: 3%;
}
/* Home page content */
#searchForm {
height: auto;
width: 50%;
}
.wrapper-home {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* start of home */
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.main-home {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.wrapper-button {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-home article {
height: 10vmin;
width: 100%;
background-color: rgba(166, 14, 22, 0.5);
border-bottom: 1vmin solid rgba(166, 14, 22, 1);;
border-radius: 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 100px;
}
.text-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.text-wrap p {
font-size: 1.5vmin;
}
.text-wrap h4 {
font-size: 2.1vmin;
}
.main-home section {
width: 40vmin;
margin: .5%;
}
.ole img {
height: 100%;
width: auto;
}
.ole h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.ole p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash img {
height: 100%;
width: auto;
}
.rash h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals img {
height: 100% ;
width: auto;
}
.goals h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players img {
height: 100%;
width: auto;
}
.players h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm img {
height: 100%;
width: auto;
}
.potm h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear img {
height: 100%;
width: auto;
}
.newyear h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem img {
height: 100%;
width: auto;
}
.prem h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women img {
height: 100%;
width: auto;
}
.women h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s img {
height: 100%;
width: auto;
}
.u23s h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends img {
height: 100%;
width: auto;
}
.legends h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.main-home article:hover {
transform: scale(1.1);
}
.video-wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.video-wrapper iframe {
padding: 10px;
}
.wiki-header {
color: #DBE3DF;
}
#demo {
background-color: white;
text-decoration: none;
}
.txt {
font-size: 2.1vmin;
}
/* End of home page content */
.faq-main {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* start of faq */
.faq-main h2{
color:darkred;
}
.faq-main p{
color:darkred;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
adding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: grey;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*end of FAQ*/
/* start of links.html */
.wrapper-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-contact {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.main-contact article {
height: 12vmin;
width: 50vmin;
background-color: rgba(51, 51, 51, 0.5);
border: 1vmin solid black;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 5%;
}
.main-contact section {
margin: 2.5%;
}
.facebook img {
height: 100%;
width: auto;
}
.facebook h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.gmail img {
height: 50%;
width: auto;
margin-left: 5%;
}
.gmail h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 2.5vmin;
margin: 10%;
}
.twitter img {
height: 100%;
width: auto;
}
.twitter h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.number img {
height: 70%;
width: auto;
margin-left: 5%;
}
.number h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.button-area {
display: flex;
justify-content: center;
align-items: center;
}
.contact_me img {
height: 70%;
width: auto;
margin-left: 5%;
}
.contact_me h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.main-contact article:hover {
transform: scale(1.1);
}
/* end of links.html */
/* footer */
footer {
grid-area: footer;
width: 100%;
height: 5%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
order: 3;
}
footer a {
color: #9fff80;
margin-left: 1vmin;
margin-right: 1vmin;
font-size: 2vmin;
}
.icons {
display: flex;
align-items: center;
height: 100%;
}
i {
color: white;
cursor: pointer;
font-size: 2vmin;
}
i p {
display: none;
font-size: 2vmin;
transition: all 2s;
margin-left: 1vmin;
}
i:hover {
color: #9fff80;
}
i:hover p {
color: #9fff80;
display: inline-block;
}
.cr {
display: flex;
align-items: center;
margin-right: 10vmin;
width: 25%;
height: 100%;
}
How do i adjust the breakpoint of my buttons so that they will collapse into a column?
short answer is:
display: flex;
flex-direction: column;
justify-content: center;