class Menu extends React.Component {
render() {
return(
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<div className="navbar-nav m-auto">
<div className="nav-item" >
<a className="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path d="M3 4v16h18V4H3zm16 14H5V8h14v10z"/></svg>
LINK
</a>
</div>
</div>
</div>
);
}
}
class Navbar extends React.Component {
render() {
return (
<div className="navbar navbar-expand-lg navbar-light" style={{background: "whitesmoke",height:"90px" }}>
<a className="navbar-brand" href="#" style={{padding: "0"}}>
<div style={{display: "flex", width: "auto", height: "100px"}}>
<div style={{display: "block", height: "100px", width: "80px"}}>
<img src="https://img.icons8.com/dusk/64/000000/cat-profile.png" width="80px" height="80px" alt="" />
</div>
<div style={{display: "block", height: "100px", paddingTop: "20px" }}>
<span style={{display: "flex", fontSize: "24px", marin: "0px", textAlign: "center"}}>BRAND</span>
<span style={{display: "flex", fontSize: "12px", color: "blue", textAlign: "center", padding: "0 2px" }}>Brand Tagline Here</span>
</div>
</div>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Menu />
</div>
);
}
}
ReactDOM.render(
<Navbar />, document.getElementById('content')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<head>
<body>
<div id="content">
Profile icon by Icons8</div>
</body>
<html>
I am using react and bootstrap through CDN and i want to have a navbar that have svg images before navigation links. How to add a fill color on svg when i hover?
I have created navbar as a component, the menu wrapper as a component but i want to fill svg and corresponding navigation menu together
Try adding some CSS or SASS like a:hover, svg:hover { fill: red; color: red !important; }.
class Menu extends React.Component {
render() {
return(
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<div className="navbar-nav m-auto">
<div className="nav-item" >
<a className="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path d="M3 4v16h18V4H3zm16 14H5V8h14v10z"/></svg>
LINK
</a>
</div>
</div>
</div>
);
}
}
class Navbar extends React.Component {
render() {
return (
<div className="navbar navbar-expand-lg navbar-light" style={{background: "whitesmoke",height:"90px" }}>
<a className="navbar-brand" href="#" style={{padding: "0"}}>
<div style={{display: "flex", width: "auto", height: "100px"}}>
<div style={{display: "block", height: "100px", width: "80px"}}>
<img src="https://img.icons8.com/dusk/64/000000/cat-profile.png" width="80px" height="80px" alt="" />
</div>
<div style={{display: "block", height: "100px", paddingTop: "20px" }}>
<span style={{display: "flex", fontSize: "24px", marin: "0px", textAlign: "center"}}>BRAND</span>
<span style={{display: "flex", fontSize: "12px", color: "blue", textAlign: "center", padding: "0 2px" }}>Brand Tagline Here</span>
</div>
</div>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Menu />
</div>
);
}
}
ReactDOM.render(
<Navbar />, document.getElementById('content')
);
a:hover, svg:hover { fill: red; color: red !important; }
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<head>
<body>
<div id="content">
Profile icon by Icons8</div>
</body>
<html>
Related
Page pushed to the left and title section pushing the width of the page. I'm new to web Dev, So please let me know where I made the mistake and how to correct it. Full CSS and HTML codes included. Bootstrap version 4. This is a personal blog, my am was to make each post page responsive the same way the homepage made responsive. I can't figure out how to do it. Red arrows show where it pushed to the right
https://github.com/GreshanBovithanthrige/Personal-Blog.git
Git Hub Repo link
html {
height: 100%;
}
body {
font-family: "Montserrat";
color: #000;
min-height: 100%;
display: flex;
flex-direction: column;
}
#title {
background-color: #082032;
color: #fff;
text-align: center;
}
.gb-img {
position: relative;
padding: 5% 0%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
/* display: flex; */
}
.heading {
text-align: center;
margin: auto;
}
.container-fluid {
padding: 3% 15%;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
color: #000;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
p {
color: #40514E;
}
/* Navigation Bar */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: "Alumni Sans";
font-weight: 500;
font-size: 2.7rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 300;
}
/* Buttons */
.about-button {
margin: 2% 0% 5% 0%;
}
.card-button {
width: 180px;
margin: auto;
}
/* Features Secition */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.card {
background-color: #212529;
border-radius: .50rem;
}
.card-text {
color: #fff;
}
.card-title {
color: #fff;
}
.post-column {
padding-bottom: 5%;
}
/* Footer */
#footer {
padding: 7% 15%;
text-align: center;
background-color: #334756;
margin-top: auto;
}
.p-text {
color: #fff;
}
.sm-icon {
padding: 20px 10px;
}
/* About me page styles */
.about-page-p {
text-align: left;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 30%;
padding-right: 30%;
}
/* Posts Section */
/* Post 1 */
.post1 {
text-align: justify;
padding: 7% 15%;
}
.office-image {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3% 0%;
}
/* Post 2 */
.post2 {
text-align: justify;
padding: 7% 15%;
}
#media (min-width: 320px) and (max-width: 767px) {
/* .row {
position: relative;
} */
.container-fluid{
position: relative;
width: 100%;
}
.common{
margin: auto;
padding-left: 12%;
padding-bottom: 20px;
}
body{
padding:0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>GB</title>
<link rel="SHORTCUT ICON" href="images/GB.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark navbar">
<a class="navbar-brand" href="index.html">GB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-me.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Title -->
<!-- <div class="row"> -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm">
<h1>Hello.</h1>
<h2>I'm Greshan Bovithanthrige</h2>
<h4>A Sys Admin based in Sri Lanka</h4>
About me
</div>
<div class="col-sm row common">
<img src="images/GB.png" height="280" width="280">
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column">
<div class="card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">All of us in whatever context is tasked with getting more from less!</h5>
<p class="card-text">The energy behind writing this article came from an interview I had the privilege to watch recently.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/RAM.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Is it necessary to stress test your RAM/Memory?</h5>
<p class="card-text">The short answer is YES. You should. But, it really depends on the context.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<span style="color:#FFF;"><span /><i class="fab fa-facebook sm-icon"></i>
<a href="https://instagram.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-instagram sm-icon"></i><a />
<a href="https://twitter.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-twitter sm-icon"></i><a />
<span style="color:#FFF;"><span /><i class="fab fa-linkedin-in sm-icon"></i>
<span style="color:#FFF;"><span /><i class="fas fa-envelope-square sm-icon"></i>
<p class="p-text">Crafted by Greshan Bovithanthrige</p>
</footer>
</body>
</html>
In the below code the media query not working. Please help if any mistake I did.
I used paragraph media query the below. When I checked in mobile mode t is not working.
/* eslint-disable react/jsx-no-target-blank /
/ eslint-disable react/no-unescaped-entities */
import React from 'react'
import { DropdownButton, Dropdown } from 'react-bootstrap'
const ProfileInfo = () => {
const paragraph = {
position: 'absolute',
top: '66px',
right: '108px',
'#media screen and (min-width: 610px)': {
position: 'static'
}
}
return (
<div className="container-fluid">
<div className="row clearfix">
<div className="col-md-6 col-sm-12"> </div>
<div className="col-md-6 col-sm-12"> </div>
</div>
<div className="row" style={{ margin: 'auto', width: '50%' }}>
<div className="alert alert-success col-md-12 col-sm-12">
<h5 className="alert-heading">Aktive meldinger</h5>
<p>
Hahahahahhhhhfgdfgf gdfgdfgffgdfggfhgh fgdfgdfgfgfg
</p>
</div>
</div>
<div className="row clearfix">
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }}><strong>Profile: </strong> </h5>
<p className="card-text"><strong>Navn: </strong> Bengt Nilsfors</p>
<p className="card-text"><strong>Kontaktinformasjon: </strong> 95833897, nilsfors#gmail.com</p>
<DropdownButton id="dropdown-basic-button" variant="outline-primary"
title="Address">
<Dropdown.Item href="#/action-1">Address1 </Dropdown.Item>
<Dropdown.Item href="#/action-2">Address2</Dropdown.Item>
<Dropdown.Item href="#/action-3">Address3</Dropdown.Item>
</DropdownButton>
<p className="card-text"><strong>Adresse: </strong> Nøkken 7 H0101, 9016 Tromsø</p>
<p className="card-text"><strong>Passord: </strong> ***********</p>
<button className="btn btn-success">Rediger</button>
</div>
</div>
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }} ><strong>Nettverksanalyse</strong></h5>
<img className="card-img" variant="top" src="../images/testimg.png" style={{ width: '152px' }} />
<div style= { paragraph }>17:58:55: Henter nettverskinfo...<br/>
18:00:31: Nettverkstatus ok. Ingen feil funnet.</div>
<button className="btn btn-warning mt-2 text-center">See details</button>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Abonnement</h5>
<p className="card-text"><strong>Internett</strong></p>
<p className="card-text">Giga (1000/1000) Kr 699,- per mnd.</p>
Oppgrader
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Faktura</h5>
<ul className="list-group" style= {{ float: 'left' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Mars 2021</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link"href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Februar 2021</a></li>
</ul><ul className="list-group" style={{ float: 'right' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}> November 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Oktober 2020</a></li>
</ul>
<div style={{ marginTop: '76px' }}> Se alle</div>
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Kontakt oss</h5>
<p className="card-text">Kontakt oss via chat eller telefon 38 99 01 00.</p>
Chat
</div>
</div>
</div>
</div>
</div>
)
}
export default ProfileInfo
t's not the problem with react its with the CSS code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the #media queries to the end of the CSS page. i.e
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
I have a bootstrap grid layout in my web app I want to align all on the same line. For example, when loading in full screen, the cards look as follows:
However, when the page is resized, the cards appear as follows
I need to make them look like the first image regardless of how the page is resized, jut not sure how to go about doing this.
Below is my code:
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-md-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-md-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
just divide the grid in 5 by 3 manner for all views (xs, sm, md) as container total width is 8.
media queries breakpoints : grid-media-queries
example is below with the
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex col-md-8">
<div class="" style="background-color: 'white', border-radius: 5, border: '1px solid #EAE8E8'">
<div class="row">
<div class="d-flex col-xs-5 col-sm-5 col-md-5">
<div class="row" style="padding-top: 20, padding-bottom: 20, padding-left: 40">
<h4>
<b> restaurant name</b>
<div key=1><span class="badge-sm badge-secondary" style="color: 'white', background-color: '#DA9550', font-size: 9">dietaryRestriction</span> </div>
</h4>
restaurant description
<br /><br />
<span class="munchtime pointer"><i class="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>$2000</s></b> <span class="discount"><b>20%</b></span>
</div>
</div>
<div class="d-flex col-xs-3 col-sm-3 col-md-3">
<img src='https://picsum.photos/200/300
' style="width: '100%', height: 250, objectFit: 'cover'" />
</div>
</div>
</div>
</div>
In your code, you are using col-md-8 which will work from min-width of 992px. you can replace md with xs, so that it will work for all resolutions.
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-xs-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-xs-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
You should only have to adjust the "col" className so that it is always 8 and 4 on any breakpoint.
I coded this layout but it's not responsive. The image doesn't seem to respond as it needs to. Can someone help me with this.
I wanted the code to respond to image where it is able to re-size itself as the browser size is adjusted. However i can only see that the images sort of align as I re-size the browser but it fails to change the sizes. I am not sure what is going on in here. Seems like i have all the code placed in but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
.responsive {
width: 100%;
height: auto;
}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Here you go:
https://codepen.io/panchroma/pen/EeaoyP
There were two simple syntax errors in your CSS, I added a closing curly bracket at line 20 and commented out line 28 in your HTML.
What was happening without these corrections is that there was no max-width for your images and they weren't scaling at narrow viewports.
Good luck!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
} /* added closing bracket */
.responsive {
width: 100%;
height: auto;
}
/* } commented out this bracket */
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>