I'm making a header for my website, and I added this snippet
#media only screen and (max-width: 993px)
{ .site-header, .rightside, .site-identity, .nav, .leftside, .search, .search-container, .iconbar,
{display: none !important;}
}
to hide it on mobile, I've used it previously with different classes and it used to work, but now it doesn't seem to work with my current header. What am I doing wrong?
Header code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/706d8a1355.js" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
}
a {
text-decoration: none;
color: #a1a1a1;
transition: all 0.2s ease;
}
a:hover {
color: #f8f8ff;
}
.site-header {
overflow: hidden;
background-color: #333;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-identity {
float: left;
display: flex;
white-space: nowrap;
align-items: center;
}
.site-identity h1 {
font-size: 1.2em;
}
.site-identity img {
max-width: 50px;
float: left;
margin: 0.3em; /*LOGO*/
}
.nav {
display: flex;
margin-left: 3em;
white-space: nowrap;
font-weight: bold;
}
.nav a {
/* Leave 0 the first, the second is between them*/
padding: 0em 1em;
}
.search {
float: left;
border: none;
overflow: hidden;
border-radius: 20px;
background: #1B1B1B;
width: 60%;
padding: 0.5px 0.5px;
}
.search input[type="text"] {
border: 0px;
width: 67%;
background: none;
font-size: 14px;
}
.search input[type="text"]:focus {
outline: 0;
color: #f8f8ff;
}
.icon-bar {
display: flex;
margin-left: 0.5em;
margin-right: 0.5em;
}
.icon-bar a {
color: #a1a1a1;
font-size: 20px;
padding: 0em 0.2em;
}
.icon-bar a:hover {
color: #f8f8ff;
}
button[type=submit] {
overflow: hidden;
float: right;
cursor: pointer;
color: #a1a1a1;
background: none;
border: 1px solid transparent;
}
button[type=submit]:hover {
color: #f8f8ff;
}
.leftside {
display: flex;
justify-content: right;
align-items: center;
width:42%;
}
.rightside {
display: flex;
align-items: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media only screen and (max-width: 993px)
{ .site-header, .rightside, .site-identity, .nav, .leftside, .search, .search-container, .iconbar,
{display: none !important;}
}
</style>
<body>
<header class="site-header">
<div class="rightside">
<div class="site-identity">
<img src="http://via.placeholder.com/400" alt="title"/>
<h1>title</h1>
</div>
<div class="nav">
opt1
opt2
opt3
opt4
</div>
</div>
<div class="leftside">
<div class="search">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
</div>
</div>
<div class="icon-bar">
<a class="active" href="mio-account"><i class="fa fa-user-circle"></i></a>
<i class="fa fa-heart"></i>
<i class="fa fa-bell"></i>
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</header>
</body>
Related
Please help me I am new at web development, how do I change the font awesome icon color?
In my Navbar.js
import { Component } from "react";
import "../Css/Elements/Navbar.css";
class Navbar extends Component {
state = { clicked: false };
handleClick = () => {
this.setState({ clicked: !this.state.clicked });
};
render() {
return (
<>
<nav>
<a id="navlogo" href="/">Blank</a>
<div>
<ul
id="navbar"
className={this.state.clicked ? "#navbar active" : "#navbar"}
>
<li>
<a href="/">
Home
</a>
</li>
<li>
Shop
</li>
<li>
Blog
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="mobile" onClick={this.handleClick}>
<i
id="bar"
className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
></i>
</div>
</nav>
</>
);
}
}
export default Navbar;
Css (i put this here just in case)
/* Nav */
nav {
font-family: sans-serif;
display: flex;
position: fixed;
align-items: center;
justify-content: space-between;
background: #F1F5F9;
width: 100%;
padding: 20px 23px;
z-index: 100;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}
a {
text-decoration: none;
}
#navlogo {
font-weight: 700;
font-size: 25px;
color: #1D3053;
text-transform: uppercase;
transition: all 0.2s ease;
}
#navlogo:hover {
color: #319afc;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 15px;
font-weight: 700 !important;
color: #1D3053;
text-transform: uppercase;
transition: 0.2s ease-in-out;
}
#navbar li a:hover {
color: #319afc;
}
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #319afc;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
}
#mobile i {
color: #ffff;
align-items: center;
}
#media screen and (max-width: 769px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 69px;
right: -100%;
width: 270px;
height: 100%;
background: #ffff;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 40px 0 0 10px;
z-index: 100;
transition: 0.3s ease-in-out;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px;
z-index: 100;
}
#mobile {
display: block;
}
#mobile i {
font-size: 24px;
cursor: pointer;
}
}
how do I change the "fa-bars" and the "fa-times" icon color my website theme is white and the icon is white too, so its hard to see the icon
Sorry for the bad English :)
You can add style={{color: "<color-name>"}} like this:
<i id="bar"
className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
style={{color: "red"}}>
</i>
The color of icon is controlled either by itself.
#mobile i {
color: red;
align-items: center;
}
I believe fontawesome also allow you to define color from its parent, because by default it also has this line built-in depending on the UI library you are using.
i {
color: inherit;
}
So, I was doing a react project "Amazon Clone". But I was struck here, I want to have mexican and american pizza in same row with no space left and both of them occupy same width. Please dont recommend to do width:50%, because in the consecutive rows I have 3 items in that row where each one occupies 33% of width. How do I do this?
Home.js
</div>
<div className="home_row">
<Product title="Mexican Pizza" rating={3} image="https://m.media-amazon.com/images/I/61ZjaqqnocS._AC_SY200_.jpg" price="100"/>
<Product title="Mexican Pizza" rating={2} image="https://m.media-amazon.com/images/I/51ZBqKhH4nL._AC_SY200_.jpg" price="60"/>
<Product title="Mexican Pizza" rating={4}image="https://m.media-amazon.com/images/I/71Zf9uUp+GL._AC_SY200_.jpg" price="60"/>
</div>
<div className="home_row">
<Product title="Yonex Nanoray" rating={3}image="https://images-eu.ssl-images-amazon.com/images/I/71WtW9tk4ZL._AC_UL160_SR160,160_.jpg" price="60"/>
</div>
</div>
Home.css
body{
background-color: #eaeded;
}
.homebanner{
width: 100%;
}
.home{
margin-left: auto!important;
margin-right: auto;
max-width: 100%;
}
.home_row{
display: flex;
flex-wrap:row wrap;
justify-content: center;
width: 100%;
margin: auto;
z-index: 1;
margin-left: auto;
margin-right: auto;
}
Product.js
{title}
${price}
</div>
<div className="product_rating">
{Array((rating)).fill().map((_,i)=>(
<p>⭐</p>)
)}
</div>
<img src={image} alt="" />
<Button className='addbtn' variant="contained">Add to Cart</Button>
</div>
Product.css
.product {
display: flex;
flex-direction: column;
background-color: white;
z-index: 1;
align-items: center;
margin: 10px;
padding: 30px;
border: 5px solid white;
}
.product_info {
width: 100%;
}
.product>img {
max-height: 200px;
object-fit: contain;
margin-bottom: 15px;
}
.product_rating {
margin-top: -25px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.addbtn {
background-color: #ffc73b !important;
color: black !important;
font-family: 'Amazon Ember', sans-serif;
}
.addbtn:hover {
background-color: #ffc73b !important;
color: black !important;
}
I have a next button in the sliding animation here. I want users to move to the next slide on clicking the next button and it ends on the last slide.
I'm quite new to programming so i tried the below approach to move to a specific div id but not working
<a href={"#slide-${i+2}"}
I'm doing this in react, but for simplicity, i have written this in simple form. Could someone help me with this.
* {
box-sizing: border-box;
}
.slider {
width: 800px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 800px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
<div class="slider">
<button>Next</button>
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>
You can use scrollIntoView by targeting the id of whatever the next slide is and have a simple state to keep track of the current id.
const App = () => {
const [current, setCurrent] = React.useState(1)
React.useEffect(() => {
if (current === 6) setCurrent(1)
document.querySelector(`#slide-${current > 5?1:current}`).scrollIntoView();
}, [current])
return (
<div className="slider">
<button onClick={() => {
setCurrent(cur=>cur+1)
}}>Next</button>
<div className="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>
)
}
ReactDOM.render(<div><App /></div>, document.getElementById("app"));
* {
box-sizing: border-box;
}
.slider {
width: 800px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 800px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>
I am trying to recreate this design:
Click to view
However, the below is currently occurring.
Click to view
I am trying to push the SignUp and Login buttons to the bottom of the sidebar to match the first image. Am I missing a CSS class that would allow me to do so, or would this be a JS configuration? Hope I have not overlooked something basic that would allow me to achieve this state.
Sidebar.js
import React from "react";
import "../App.css";
import { SidebarData } from './SidebarData'
import Logo from './Logo.svg'
import { Login } from './Login'
import { SignUp } from './SignUp'
function Sidebar() {
return (
<div className="Sidebar">
<div className="Header">
<div><img src = {Logo} alt='Logo’ className='Logo’ /></div>
</div>
<div class="line-break" />
<ul className="SidebarList">
{SidebarData.map((val, key) => {
return (
<li
key={key}
className="row"
id={window.location.pathname == val.link ? "active" : ""}
onClick={() => {
window.location.pathname = val.link;
}}
>
<div id="icon">{val.icon}</div> <div id="title">{val.title}</div>
</li>
);
})}
</ul>
<div class="line-break" />
<div className="footer">
<ul className= "SidebarList">
{Login.map((val, key) => {
return (
<li
key={key}
className="Login"
id={window.location.pathname == val.link ? "active" : ""}
onClick={() => {
window.location.pathname = val.link;
}}
>
<div id="title">{val.title}</div>
</li>
)}
)}
</ul>
<ul className= "SidebarList">
{SignUp.map((val, key) => {
return (
<li
key={key}
className="SignUp"
id={window.location.pathname == val.link ? "active" : ""}
onClick={() => {
window.location.pathname = val.link;
}}
>
<div id="title">{val.title}</div>
</li>
)}
)}
</ul>
</div>
</div>
Here is CSS
.App {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 300px;
background-color: white;
border-right: 1px solid #F0F4FB;
padding-left: 15px;
box-sizing: border-box;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
box-sizing: border-box
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
padding-bottom: 15px;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.SidebarList .Login {
background-color: white;
color: #FD954E;
width: 90%;
height: 5vh;
right: 1596px;
top: 958px;
border: 1px solid #FD954E;
box-sizing: border-box;
border-radius: 19.5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif
}
.SidebarList .SignUp {
width: 90%;
height: 5vh;
right: 1596px;
top: 1011px;
background: #FD954E;
border-radius: 19.5px;
border: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
transform: scale(1.2)
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 25px;
padding-top: 25px;
padding-bottom: 30px;
width: 55%;
}
.line-break {
height: 1px;
width: 100%;
background-color: #F0F4FB;
}
ul.nav {
list-style-type: none;
padding: 20px 0 0 40px;
list-style-type: none;
}
ul.nav li {
margin-bottom: 14px;
list-style-type: none;
}
ul.nav li:last-child {
margin-bottom: 0;
list-style-type: none;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}
.footer button {
padding: 6px 0;
width: 80%;
margin-bottom: 14px;
}
.footer button:last-child {
margin-bottom: 0;
}
.header .Logo {
height: 40px;
width: 200px;
background-color: grey;
margin: 20px;
}
Without seeing the source for the entire page and not just a couple of the buttons, it is impossible to say for sure, but my guess would be the following is causing your problem:
.Sidebar {
height: 100%;
...
}
Setting height: 100% will only tell the sidebar to take up 100% of the space it needs for its content (or 100% of the height of its bounding container, depending on the display properties of both). I would recommend changing it to this to solve your problem:
.Sidebar {
min-height: 100vh;
...
}
I'm trying to find a right solution for stacking different height divs. Tried grid, flex and lastly inline-block.
From what i understand 3rd div(button) is attatched to the bottom of a 2nd div(image). I'm trying to make so it would be attatched to the bottom of a 1st div(text).
Button is being drawn as 3rd div is because button has to go under an image when window size gets too small. Can you even achive this with inline-block?
My current code:
https://jsfiddle.net/mep2x67L/16/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
}
.btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>
All you need to do is float your image div right - below I have commented the line I added. I have also added a clear fix and changed the width of the button wrap so it works on smaller screen sizes.
#container {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
width: 100%;
height: 100%;
}
#container:after { /* clear fix */
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
float:right; /* add this */
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
width: calc(50% - 20px); /* I would make this the same size as desccription */
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>
You can use Grid - it's super easy, and you can control the position and grid layout with just media queries, etc. And it requires much less CSS when you learn how to use grid properly.
To learn about flexbox, I'd recommend this source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Similarly, to learn CSS grids, there is: https://css-tricks.com/snippets/css/complete-guide-grid/
It'll take about a day of your time, and you'll get a great grasp of how grids and flexbox work, helping you create better designs in the future.
For the current example, see the fiddle with CSS-grids:
https://jsfiddle.net/5u69aaun/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
}
#description{
padding-left: 20px;
padding-right: 10px;
grid-row: 1;
grid-column: 1;
text-align: left;
}
#description_Container{
max-width: 560px;
}
#half_img {
width: 100%;
}
#img_container {
grid-row: 1 / 3;
grid-column: 2;
}
.btnWrap{
grid-row: 2;
grid-column: 1;
}
#normal_text{
font-size: 36px;
line-height: 42px;
color: red;
}
#btnWrap{
text-align: center;
}
<div id="container">
<div id="description">
<div id="description_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg" >
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>