I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: 22px;
}
.topbar {
display: block;
border-bottom: solid 1px #C2D3CD;
height: 10vh;
}
/* Nav Bar */
nav {
text-align: center;
height: 7vh;
}
.link, link:visited {
color: #C2D3CD;
text-decoration: none;
}
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
}
/* First Page */
#home-screen {
background-image: url(Images/beach-background-1-NEW.jpg);
height: 80vh;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
.text {
padding-top: 30vh;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
</div>
<!-- Nav -->
<nav>
<a id="mission-link" class="link" href="#">Mission</a>
<a id="about-link" class="link" href="#">About Us</a>
<a id="donations-link" class="link" href="#">What We Do</a>
<a id="contact-link" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<article class="text">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</article>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:
#mission-link, #about-link, #donations-link, #contact-link {
display: inline-block; /* Try making them inline block */
margin-top: 5%;
}
Try making the links inline-block.
Add display: inline-block like:
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
display: inline-block;
}
I have checked your code remove: height: 10vh; from topbar class
Related
So, i am doing this frontend mentor challenge. I have done the mobile first design. My problem is how do i get my navbar to be like this . I have tried using display flex with flex direction row but the mobile design navbar is not changing its shape and size.
My code is producing the navbar like this
Can anyone please tell me what i am doing wrong in the media query that i am not getting the output i desire.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<script src="https://kit.fontawesome.com/572b4fce3c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
</head>
<body>
<main>
<section class="header">
<!-------- Header Section -------->
<nav>
<img src="/images/logo.svg" alt="logo"></a>
<div class="nav-links" id="navLinks">
<!-- <i class="fa fa-solid fa-xmark"></i> -->
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Resources</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showHideMenu()"></i>
</nav>
<img class='illustration' src="/images/illustration-working.svg" alt="illustration">
<div class="first-section-content">
<h1>More than just <span class="short">shorter links</span></h1>
<p>Build your brand's recognition and get detailed insights on how your links are
performing.</p>
<button class="get-started">Get Started</button>
</div>
</section>
<!-- URL shortening -->
<article class="shorten-details">
<section class="shorten">
<div class="shorten-link">
<input type="text" placeholder="Shorten a link here....">
</div>
<span class="error-msg">Please add a link</span>
<button class="short-it">Shorten It!</button>
</section>
</article>
<!-- URL Copy -->
<article class="url-copy">
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<!-- <div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section> -->
<section class="advanced-stats">
<h2>Advanced Statistics</h2>
<p class="perform">Track how your links are performing across the web with our advanced statistics
dashboard.</p>
<div class="stats">
<div class="stat">
<img class="brand-img" src="/images/icon-brand-recognition.svg" alt="brand-recognition">
<h3>Brand Recognition</h3>
<p class="stat-desc">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</ class="boost">
</div>
<div class="stat-1">
<img class="brand-img" src="/images/icon-detailed-records.svg" alt="detailed-records">
<h3>Detailed Records</h3>
<p class="stat-desc">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="stat-2">
<img class="brand-img" src="/images/icon-fully-customizable.svg" alt="fully-customizable">
<h3>Fully Customizable</h3>
<p class="stat-desc">Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.</p>
</div>
</div>
</section>
</article>
<article class="boost-links">
<section class="boost">
<h2>Boost your links today</h2>
<button class="get-started-2">Get Started</button>
</section>
</article>
<article class="last-footer">
<section class="footer">
<div class="footer-links">
<div class="footer-link">
<h2>Shortly</h2>
<h3>Features</h3>
<ul>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
</div>
<div class="footer-link">
<h3>Resources</h3>
<ul>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
</div>
<div class="footer-link">
<h3>Company</h3>
<ul>
<li>About</li>
<li>Our Team</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="socials">
<div class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</section>
</article>
</main>
<script src="script.js"></script>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Nelson Uprety.
</div>
</body>
</html>
CSS code for the header / navbar part:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;700&display=swap');
#import url('css-reset.css');
:root {
--color-cyan: hsl(180, 66%, 49%);
--color-dark-violet: hsl(257, 27%, 26%);
--color-red: hsl(0, 87%, 67%);
--color-gray: hsl(0, 0%, 75%);
--color-grayish-violet: hsl(257, 7%, 63%);
--color-grayish-violet-op: hsl(257, 7%, 63%, 0.3);
--color-very-dark-blue: hsl(255, 11%, 22%);
--color-very-dark-violet: hsl(260, 8%, 14%);
--color-second-bg: hsl(230, 25%, 95%);
--color-white: hsl(0, 0%, 100%);
--font-weight-five: 500;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
}
main {
overflow: hidden;
/* border: 1px solid green; */
max-width: 390px;
height: auto;
margin: 0 auto;
}
/* -------Header Section--------- */
.header {
display: flex;
flex-direction: column;
padding: 30px;
max-width: 350px;
}
.nav {
display: flex;
position: relative;
}
.nav-links {
background-color: var(--color-dark-violet);
width: 330px;
height: 370px;
border-radius: 10px;
position: absolute;
z-index: 2;
transition: 0.3s;
top: 100px;
right: 63px;
visibility: hidden;
}
nav .fa {
display: block;
color: var(--color-grayish-violet);
font-size: 30px;
cursor: pointer;
right: 63px;
top: 30px;
position: absolute;
}
.nav-links ul li {
list-style: none;
padding: 14px;
text-align: center;
display: block;
}
.nav-links ul li a {
text-decoration: none;
color: var(--color-white);
font-weight: var(--font-weight-seven);
font-size: 1.2rem;
padding: 10px 100px;
border-radius: 25px;
}
.nav-links ul li a:hover {
background-color: var(--color-cyan);
color: var(--color-white);
}
.nav-links ul li:nth-child(3) {
border-bottom: 1px solid var(--color-grayish-violet-op);
padding-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.illustration {
position: relative;
right: -50px;
transform: scale(1.6);
margin-top: 100px;
right: -90px;
z-index: 1;
display: block;
}
.first-section-content {
margin-top: 100px;
transition: 0.3s;
}
.first-section-content.menu-open {
margin-top: 130px;
transition: 0.3s;
}
.first-section-content h1 {
font-size: 2.67rem;
font-weight: var(--font-weight-seven);
color: var(--color-very-dark-blue);
margin-bottom: 20px;
margin-left: 9px;
width: 350px;
line-height: 1.2;
}
.short {
margin-left: 15px;
}
.first-section-content p {
font-size: 1rem;
color: var(--color-grayish-violet);
font-weight: var(--font-weight-five);
margin-bottom: 35px;
margin-left: 6px;
width: 350px;
line-height: 2;
letter-spacing: 0.7px;
overflow: hidden;
}
.get-started {
background-color: var(--color-cyan);
color: var(--color-white);
border: none;
padding: 14px;
font-weight: var(--font-weight-seven);
width: 190px;
border-radius: 30px;
cursor: pointer;
margin-left: 70px;
}
#media (min-width:768px) {
body {
overflow-y: scroll;
min-height: 100vh;
overflow-x: hidden;
}
main {
height: 100vh;
max-width: 100%;
overflow: scroll;
}
.header {
display: flex;
/* align-items: center; */
/* flex-direction: row; */
width: 100%;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.3rem;
padding: 2.9rem 9.2rem;
position: relative;
}
.nav-links {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.nav-links ul li {}
.nav-links ul li a {
display: flex;
display: inline;
flex-direction: row;
background-color: transparent;
visibility: visible;
color: var(--color-gray);
}
nav .fa {
display: none;
}
}
display: flex; needs to be on the ul inside the .nav-links div - that ul is the element which contains the navigation items.
I have put down below my HTML and CSS. I can't figure out why the gap is there and the bottom. I will put a picture in as well.
My Code :
/*
Landon Byrd
Fall 2021
Light Blue #06aed5
Darker Blue #086788
Cream White #f2f4f3
Yellow #f0c808
Rich Red #dd1c1a
Black #333
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788;}
h3 {text-align: center; color: #086788; text-decoration: underline #f2f4f3; text-shadow: 2px 2px #f2f4f3;}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }
/* Nav Section */
/* Add a black background color to the top navigation */
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
opacity: 0.5;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #f0c808;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
/* Main Section */
.banner{justify-content: center;background-color: #333; border-radius: 2pt; color: #f2f4f3; border-radius: 5%;}
.name{font-weight: bold; color: #f0c808}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.img1 {float:left; width: 300px; height: 350px; margin:15px; border-radius: 20%;}
.img2 {float: right; width: 330px; height: 350px; border-radius: 20%;}
body {
background-image: url("images/background.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size: 16px
}
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #333; color: #f2f4f3; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}
/* copyright section */
.copyright {text-align: center; background-color: #333; color: #f2f4f3; }
/* Menu */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5em;
}
.menu {
font-family: "Inter", sans-serif;
font-size: 14px;
}
.menu-group-heading {
margin: 0;
padding-bottom: 1em;
border-bottom: 2px solid #ccc;
}
.menu-group {
display: grid;
grid-template-columns: 1fr;
gap: 1.5em;
padding: 1.5em 0;
}
.menu-item {
display: flex;
}
.menu-item-image {
width: 80px;
height: 80px;
flex-shrink: 0;
object-fit: cover;
margin-right: 1.5em;
}
.menu-item-text {
flex-grow: 1;
}
.menu-item-heading {
display: flex;
justify-content: space-between;
margin: 0;
}
.menu-item-name {
margin-right: 1.5em;
}
.menu-item-description {
line-height: 1.6;
}
#media screen and (min-width: 992px) {
.menu {
font-size: 16px;
}
.menu-group {
grid-template-columns: repeat(2, 1fr);
}
.menu-item-image {
width: 125px;
height: 125px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
Home
</div>
<!-- Left-aligned links (default) -->
Menu
Contact
<!-- Right-aligned links -->
<div class="topnav-right">
Search
About
</div>
</div>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h3>Coupons and Weekly Advertisement.</h3>
<div class="row">
<div class="column">
<img src="images/coupon1.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="images/coupon2.jpg" alt="Forest" style="width:100%">
</div>
</div>
<br>
</div>
<div class="row">
<div class="column"></div>
<img class="img1" src="images/burger.jpg" alt="burger">
<div class="column"></div>
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
<h2>About the Owner</h2>
<img class="img2" src="images/chef.jpg" alt="chef">
<p>Executive chef Nicholas St. Clair knew he wanted to do something extraordinary from a young age. Little did he know, his budding culinary expertise would launch him into a whirlwind adventure in the fine dining industry. St. Clair, who graduated with high honors from the California Culinary Institute in Pasadena, CA, polished his cuisine with some of America’s premier chefs over the past five years. St. Clair and his wife, Alison, ventured into the restaurant business with determination for success and passion for fine cuisine. e took a blind leap of faith and opened a place of his own.</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<!-- Footer -->
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p>manager#superrestraunt.com</p>
<p>Contact us via Skype by clicking the following link</p>
<a href="skype:echo123?call">
Call Us Today!
</a>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
</div>
</footer>
<div class="copyright">
<h2>#copyright: Landon Byrd</h2>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
Back to top of page
</body>
</html>
I am also wondering how to change the hyperlink text color that is in my footer, as well as changing the back to top into a button. Thanks for the help! If needed I can post separate questions for those though.
To Change the color of hyperlink Back to top of page in footer and put it into a button.
Simply you can use this code snippet to change the font color of hyperlink and keep it into a button.
/* Footer Section */
.footer .top_a{
color : Red;
text-decoration: none;
font-size: 1.4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<footer class = 'footer'>
<button class = 'top_btn'> <a href="#top" class = 'top_a'>Back to top of page</a> </button>
</footer>
</body>
</html>
If you want to make the button more nicely just add this CSS part to your CSS file.
/* Footer Section */
.footer .top_btn{
background : #1f1f1f;
border : none;
border-radius : 5px;
width : 200px;
height : 50px;
}
.footer .top_a{
color : #efefef;
text-decoration: none;
font-size:16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<footer class = 'footer'>
<button class = 'top_btn'> <a href="#top" class = 'top_a'>Back to top of the page</a> </button>
</footer>
</body>
</html>
I'm new to HTML and CSS and I'm trying to design a website from some source code that I found.
When I open the page on the web, It shows as follows:
When I open this page of a mobile device it appears as follows:
When on a mobile device, the section of Download the app overlaps the phone image that I added.
How can I make sure that the whole blue section will be below the image?
The parts of the .css that I found relevant are:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
.home-image-right img {
vertical-align: bottom;
width: 75%;
}
#download {
background: #2c80c4;
color: #ffffff;
padding-top: 12rem;
padding-bottom: 12rem;
text-align: center;
}
#download h1 {
color: #ffffff;
}
#download h1::before {
background-color: #ffffff;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#download .lead {
color: #ffffff;
margin-top: 4.8rem;
}
#download .row {
max-width: 800px;
}
#download .download-badges {
list-style: none;
margin: 0;
text-align: center;
}
#download .download-badges li {
display: inline-block;
margin: 0 7.5px;
padding-left: 0;
}
#download .download-badges li a {
display: block;
width: 230px;
height: 71px;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 230px 71px;
}
<div class="overlay"></div>
<div class="home-content">
<div class="row contents">
<div class="home-content-left">
<img src="images/logo.png" srcset="images/logo.png 1x" data-aos="fade-up">
<h1 data-aos="fade-up">
....
</h1>
<div class="buttons" data-aos="fade-up">
<a href="#download" class="smoothscroll button stroke">
<span class="icon-circle-down" aria-hidden="true"></span> Download App
</a>
</div>
</div>
<div class="home-image-right">
<img src="images/screen.png" srcset="images/screen.png 1x" data-aos="fade-up">
</div>
</div>
</div>
<!-- end home-content -->
<div class="home-scrolldown">
<a href="#about" class="scroll-icon smoothscroll">
<span>Scroll Down</span>
<i class="icon-arrow-right" aria-hidden="true"></i>
</a>
</div>
</section>
<!-- end home -->
<!-- download
================================================== -->
<section id="download">
<div class="row">
<div class="col-full">
<h1 class="intro-header" data-aos="fade-up">Download Our App Today!</h1>
<ul class="download-badges">
<li>Play Store</li>
</ul>
</div>
</div>
</section>
<!-- end download -->
Thank you
you may style your website with two specific css coding one is for desktop view and other one is for mobile view you want to use this media tag and write your css for mobile view into this
you may change the max-with value since 1px
it make if your device width is smaller than 600px it change the background-color to light blue
#media only screen and(max-width: 600px){
body{
background-color:light blue;
}
}
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Hmm that´s hard to say, without knowing where the image is. But i think this is your problem:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
position: absolute.
When assigning a position, you take out this section from the flow.
Take a look here: https://www.w3schools.com/css/css_positioning.asp
I am working on a flip card for my personal portfolio. I have my divs set to a certain size and I want two in a row, but they won't go to the size I have set and four go in a row instead of the two I want. Here is the all of my code:
/* Whole Page */
body {
margin: 0;
text-align: center;
}
/* Nav */
nav {
display: block;
position: fixed;
background-color: black;
color: white;
width: 100%;
height: 10vh;
border-bottom: solid white 1px;
}
.btns {
display: inline-block;
float: right;
margin-top: -3.25%;
font-family: sans-serif;
width: 30vw;
}
button {
background-color: black;
border: none;
color: white;
display: inline-block;
float: right;
margin-right: 1%;
margin-left: 1%;
font-size: 22px;
cursor: pointer;
}
#logo {
margin-left: 3.5%;
text-align: left;
}
/* Welcome Section */
#welcome-section {
background-image: url(https://www.walldevil.com/wallpapers/a51/2755-city-cityscape-wallpaper-architecture-wallpapers-albums-skylines.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
border-bottom: black 3px solid;
}
h1,
#welcome-section p {
width: 50%;
color: white;
text-align: left;
margin: auto;
font-weight: 800;
}
h1 {
font-size: 60px;
padding-top: 25vh;
font-family: sans-serif;
}
#welcome-section p {
font-size: 27px;
font-family: serif;
}
/* Portfolio */
#projects {
width: 55vw;
margin: auto;
}
#projects-h2 {
font-size: 30px;
text-decoration: underline;
}
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
.flip-card .front,
.flip-card .back {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-size: cover;
transition: 0.3s;
backface-visibility: hidden;
/* Change Colors! */
border: solid 1px #333;
box-shadow: 5px 10px 8px #333;
}
.flip-card:hover .front {
transform: rotateY(180deg) scale(0.5);
}
.flip-card .back {
/* Change Colors! */
background: #333;
color: #FFF;
display: flex;
justify-content: center;
transform: rotateY(180deg) scale(0.5);
}
.flip-card:hover .back {
transform: rotateY(360deg) scale(1);
}
.flip-card .front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Contact */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="main.css">
<!-- FreeCodeCamp Tests -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<title>Jacob Pieczynski | Front-end Web Developer</title>
</head>
<body>
<!-- Nav -->
<nav id="navbar">
<h2 id="logo">Jacob Pieczynski</h2>
<div class="btns">
<button>Home</button>
<button>Projects</button>
<button>Contact</button>
</div>
</nav>
<!-- Welcome Section -->
<section id="welcome-section">
<h1>I am Jacob Pieczynski</h1>
<p class="h1-desc">An up and coming teen web developer</p>
</section>
<!-- Projects -->
<section id="projects">
<h2 id="projects-h2">Projects</h2>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<!-- Contact Circle - Instagram -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Email -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - FreeCodeCamp -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Github -->
<a href="#" id="contact-a">
</a>
</section>
<!-- Footer -->
<footer id="footer">
</footer>
</body>
</html>
Thanks for the help as this is a major project for me that I am very frustrated with at this point. Have a great day!
It looks like that is happening because you are overriding the width you set with the media queries like for example you have this:
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
Then you have this:
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
Each of the widths in those media queries are overriding your 25vw, if you remove the width percentages out of each of those media queries or change the width:23% to 48% your cards will go into 2 to each row. The width 23% is telling them to be 23% percentage of the container width which is approximately 1/4 of the width which would cause them to be 4 in a row.
My question is how to position these cards on my website?
https://imgur.com/a/Ompfh
It would be easy if there isn't this half circles above them.
I have tried to create parent class="cards" and class="card" for each of 3 cards.
In css:
.cards { display: flex }
.card { width: 33.33% }
And set relative position to my background and absolute position to my half-circles but I want to do it without absolute and relative positions if it's possible.
.cards {
display: flex;
}
.card {
width: 33.33%;
color: #fff;
text-align: center;
}
.card p {
min-height: 80px;
padding: 0 39px 0 39px;
}
.strategy--logo {
position: absolute;
top: 383px;
left: 607px;
width: 96px;
height: 48px;
background-color: #5a471b;
border-top-right-radius: 48px;
border-top-left-radius: 48px;
}
.strategy {
margin-top: 135px;
background-color: #5a471b;
}
.crop--marketing {
margin-top: 135px;
background-color: #9fa374;
}
.risk--mgmt {
margin-top: 135px;
background-color: #666;
}
<div class="cards">
<div class="card">
<div class="strategy">
<div class="strategy--logo">
<img src="css/images/strategy-logo.png" alt="" />
</div>
<!-- /.strategy-/-logo -->
<h2>
</h2>
<p>
</p>
</div>
<!-- /.crop-/-marketing -->
</div>
<!-- /.card -->
<div class="card">
<div class="crop--marketing">
<img src="css/images/crop-logo.png" alt="" />
<h2>
</h2>
<p>
</p>
</div>
<!-- /.crop-/-marketing -->
</div>
<!-- /.card -->
<div class="card">
<div class="risk--mgmt">
<img src="css/images/arrow-logo.png" alt="" />
<h2>
</h2>
<p>
</p>
</div>
<!-- /.risk-/-mgmt -->
</div>
<!-- /.card -->
</div>
<!-- /.cards -->
Now I'm using absolute and relative but is there another way? Because when I resize my web browser the circles go away random ...
Are you trying to achieve this?
.card {
displaY: block;
float: left;
width: 33.33%;
text-align: center;
color: white;
font-family: 'Calibri';
}
.icon {
width: 50px;
height: 25px;
/*half of width*/
margin: auto;
display: block;
border-radius: 50px 50px 0 0;
}
.fa {
margin-top: 10px;
}
.text {
padding: 25px;
}
.strategy .text,
.strategy .icon {
background-color: #5c471c;
}
.crop .text,
.crop .icon {
background-color: #a0a175;
}
.risk .text,
.risk .icon {
background-color: #666666;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="card strategy">
<div class="icon">
<i class="fa fa-area-chart" aria-hidden="true"></i>
</div>
<div class="text">
Our Strategy
</div>
</div>
<div class="card crop">
<div class="icon">
<i class="fa fa-pagelines" aria-hidden="true"></i>
</div>
<div class="text">
Crop Marketing
</div>
</div>
<div class="card risk">
<div class="icon">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</div>
<div class="text">
Commodity Risk Management
</div>
</div>
Is the main problem that when you use position your layout changes its position elsewhere?
If so, to use position property is ok if you make a few changes:
CSS
.strategy--logo {
position: absolute;
/* Remove this top parameter, use transform instead */
/* top:383px; */
/* Instead your value of a left use value of 50% and transform left
and right properties like it is changed below */
/* left: 607px; */
left: 50%;
transform: translate(-50%, -100%);
width: 96px; height: 48px;
background-color: #5a471b;
border-top-right-radius: 48px;
border-top-left-radius: 48px;
}
.strategy {
/* add position relative to a parent of strategy-logo */
position: relative;
margin-top: 135px;
background-color: #5a471b;
}
Then your code will stay in the same position even if you resize the screen.