So, I got a homework from school to create a landing page, of our own design. I thought to have an overlay menu and besides the toggle button, to have three icons within the navbar (2 for social media and one for user account).
I have the below HTML and CSS code that allows me to use an image as a toggle button for an overlay menu which works fine:
HTML
<header>
<ul class="social">
<li>
<img src="/images/facebook.svg" alt="">
</li>
</ul>
MyWebSite
<img src="/images/menu.svg" alt="" class="menu-btn" id="open-menu">
</header>
CSS
header {
padding: 2em;
.logo {
font-weight: bold;
margin-left: 7em;
}
.menu-btn {
float: right;
cursor: pointer;
width: 35px;
margin-right: 7em;
}
.social {
display: flex;
float: right;
list-style: none;
}
}
Also, I would like to add the icons in front of the toggle menu button. However, what I am getting now using the above code is as you can see in the print screen below which is not the expected results:
Current results
What I would to obtain though is as is shown in the below print screen:
Expected results
Could anyone give me a hint? I'd appreciate it. Thanks
You can use flexbox to create desired layout.
Example
header {
background-color: #ee4;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 0;
}
.social-icons-container {
display: flex;
align-items: center;
}
.social-icons-container i {
font-size: 20px;
padding: 0 0 0 30px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<h1>Logo</h1>
<div class="social-icons-container">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fas fa-user-alt"></i>
<i class="fas fa-bars"></i>
</div>
</header>
Related
I want to change the style of my component to fit the content,
My component Plan.vue:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
#import "../css/Plan.css";
</style>
my stylesheet Plan.css:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
I have tried to add flex-shrink: 1, and width: fit-content to my stylesheet, but it didn't work well with me, can you please tell me how can I make my design responsive? thanks in advance.
The problem is with .plan outer div which by default will display as block, making your #planFlex stretch to its borders.
If you add the following you should find that #planFlex will just be the width of your content:
.plan {
display: flex;
justify-content: center;
}
In your specific case, you should consider removing the 80px padding on your arrow icons and let flex do the spacing for you. Assuming you want the icons to stick to the sides and your title right in the middle, just wrapped them around in some div, that did the trick for me running your project:
<div id="planFlex">
<div>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-arrow-left fa-xl"></i>
</div>
<h1 #click="addPopUp(testPopup, `Lego not in the right place`)">Plan</h1>
<div>
<i class="fa-solid fa-arrow-right fa-xl"></i>
<i class="fa-solid fa-robot fa-xl"></i>
</div>
</div>
I have a bootstrap dropdown that is only visible when the screen is a certain width. My issue is that when I resize the screen to hide the dropdown button, the previously clicked/opened dropdown menu remains open.
Is there a way to close the dropdown or get rid of the show class for the menu based on a media query? I've seen answers to similar questions, but none that helped me.
What CSS can I add to close the dropdown menu? As of now it stays open until unfocused, but I'd like it to close kind of like this sites dropdown.
.sm-screen-dropdown-menu {
top: 48px !important;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border: none;
border-radius: 0px;
padding: 0;
min-width: 200px;
}
#media (max-width: 600px) {
.hide-sidebar {
display: none !important;
}
.sm-screen-dropdown {
display: flex;
font-size: 20px;
margin-right: 15px;
margin-left: 10px;
text-decoration: none;
}
.sm-screen-dropdown:hover {
cursor: pointer;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="dropdown center">
<div class="sm-screen-dropdown" dropdown-toggle type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bars menu-icon"></i>
</div>
<ul class="dropdown-menu sm-screen-dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a class="dropdown-item" href="/">Home</a>
</li>
<div class="dropdown-divider no-margin"></div>
<div class="ms-2">
<li>
<a class="dropdown-item" href="{% url 'home' %}">Groups</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'taglist' %}">Tags</a>
</li>
</div>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You're not running your code in any kind of snippet, which makes it difficult to get the full picture. However, I threw this together to show you how to hide/display elements based on media query in JS, not in CSS.
Run the snippet in full page, inspect and bring down the viewport width and you'll see the circle disappear when the viewport is less than 576px
You can also check out this Codepen
const smallDevice = window.matchMedia("(min-width: 576px)");
let circle = document.querySelector(".shape.circle");
smallDevice.addListener(handleDeviceChange);
function handleDeviceChange(e) {
if (e.matches) circle.style.display = 'block';
else circle.style.display = 'none';
}
//run it initially
handleDeviceChange(smallDevice);
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.shape {
width: 250px;
height: 250px;
border: 1px solid black;
}
.shape + .shape {
margin-top: 1rem;
}
.shape.box {
background: blue;
}
.shape.circle {
border-radius: 50%;
background: red;
}
<div class="shape box"></div>
<div class="shape circle" style="display: none;"></div>
I know there are duplicates of similar questions to this but I just can't get my footer to stay at the bottom, and I've tried multiple suggested fixes. Please show me how to move the footer to the bottom of the page. Does it have something to do with the body? Whoever posts a solution could you say what it was that was incorrect?
<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
<body id="body">
<div>
<img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo">
</div>
</body>
<footer>
<a class="service-link" href="#">Privacy Policy</a>
<a class="service-link" href="#">Terms of Service</a>
</footer>
</html>
#charset "utf-8";
/* CSS Document */
html {
background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#body {
}
#header,
li .nav-link {
font-family: "Copperplate Gothic";
color: #000000
}
#logo { display: block;
margin-left: 26%;
margin-right: auto;
margin-top: 12%;
width: 50%;}
#navbarSupportedContent {
color: black;
font-family: "Copperplate Gothic";
font-size: .99em;
padding: 1em;
}
#navbarSupportedContent li {
list-style-type: none;
display: inline-block;
}
div #navbarSupportedContent {
width: 100%;
}
.navbar {
text-align: center;
position: relative;
font-size: 150%;
margin-left: 3%;
}
.navbar-nav {
text-align: center;
position: relative;
font-size: 150%;
}
footer .service-link {
color: #000000;
}
footer {
text-align: center;
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
What you have currently is a footer element which exists as just another plain element in the page flow (FYI, you have a redundant position:relative on it), so where it ends up is wherever the content above it ends (ie your image).
If you want a footer slammed to the bottom of the viewport that always remains visible regardless of content length or scroll position, then you'd use position: fixed on your footer, as crodev's answer shows. However this takes up screen real estate and is used with intention and good reason (like some action bar during some kind of funneled user experience).
However, for regular page circumstances, when you have short content, and want the footer to appear at the bottom of the viewport, it's best using a flex layout like below (which offers all kinds of advantages as well):
Codepen
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>
HTML:
<div class="footer">
<p>Footer</p>
</div>
CSS:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
I'd like to push the three icons below towards the center of the page while still retaining a responsive layout.
Is display: grid; or display: row; more suitable?
And depending on your answer, what are the cleanest properties to apply?
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
<style>
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
margin-left:
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
</style>
You should be use this simple trick.
Please give align-items: center; justify-content: center; into #image-holder
For more details Go to display:flex
Hope this help.
Let me know further clarifications.
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
Add the property justify-content: center; to the #image-holder id.
The buttons will be centered.
Code below
JSFiddle
The cleanest way to do this is to:
Use class-based selectors instead of ID selectors
Use flexbox to centre the layout (and text) horizontally, and centre the layout vertically
I've changed your HTML to use class-based selectors instead of IDs, e.g. class="contact" instead of id="contact":
<div class="contact">
<h1 class="contact__title">Let's connect.</h1>
<div class="contact__images">
<a class="contact__link" href="https://github.com/klin-nj-97" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact__icon">
</a>
<a class="contact__link" href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact__icon">
</a>
<a class="contact__link" href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact__icon">
</a>
</div>
</div>
For the cleanest CSS, it's ideal that all your selectors have the same level of specificity, and the best way to do that is use only class-based selectors. This will let you override styles more easily. You can read more about CSS specificity here.
The following CSS uses flexbox to position your content accordingly, assuming you are trying to centre everything vertically within the page:
body {
margin: 0; /* browser adds margins by default */
}
.contact {
display: flex;
flex-direction: column;
justify-content: center; /* centers your content horizontally */
align-items: center; /* centers your content vertically */
height: 100vh;
}
.contact__title {
margin: 0 0 55px; /* if you have a header you'd like to account for, the first value can be the header height */
}
.contact__images {
/* you don't even need anything here but the wrapping div of this classname is required to keep your icons aligned */
}
.contact__link {
text-decoration: none; /* proper way to hide the text link underline */
}
.contact__icon {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
The CSS class naming convention I used is called BEM. I recommend reading more about it if you are interested in writing clean CSS. You can do so here or here.
I have a working example here on CodePen. You can change the height of the page to see it's centred vertically.
I want to add padding top to ::after and want to make it centered.
But it's not happening, this is what I get :
After using this css :
.list-unstyled li::after {
content: url(images/heartborder.png)
text-align:center;
padding-top: 30px;
}
and this is my HTML CODE :
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>
Your :after is set by default to display: inline so padding has no effect on it. Change it to inline-block or block and then it will.
To center it (as requested in comments), use flex on the div as below:
div {
width: 50px;
height: 50px;
background: green;
display: flex;
justify-content: center;
}
div:after {
content: "";
width: 20px;
height: 20px;
background: blue;
display: inline-block;
padding-top: 5px;
}
<div></div>
you need to add semicolon after content: url(images/heartborder.png) attribute
OR
I think you need to do like this:
.list-unstyled li::after {
content: url(images/heartborder.png);
text-align: center;
padding-top: 30px;
}
Use display:block or display:inline-block to apply padding or margin. add margin:0 auto to get center.
.list-unstyled li::after {
content: url(images/heartborder.png) 0 0 no-repeat;
text-align: center;
padding-top: 30px;
display: block;
margin: 0 auto;
}
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>