We Keep Coding

how can i use active pseudo class to show something

im trying to show a text "copied" after an image has been clicked, with :active class but testing with hover and i cant figure it out. Like a :hover on a navbar to see a drop down menu
.copy {
display: flex;
&__text {
display: none;
}
&__img {
max-width: 1.2rem;
height: 1.2rem;
margin-left: 0.3rem;
cursor: pointer;
&:active {
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
}
.copy__img:active .copy__text {
display: block;
background-color: red;
}
<div className="copy">
<img
className="copy__img"
src={CopyIcon}
onClick={copyText}
alt="copy icon"
/>
<p className={"copy__text"}>copied</p>
</div>

The :active pseudo-class is used to select and style the active link or any other element. It is activated by user.
An element becomes active when the user clicks on the link or the element and presses down the mouse button.
More details on documentation
:active pseudo-class work with user click not with hovering the element.
If you are working with React.js, you can use this methods :-
jsx:
import "./App.scss";
import { useState } from "react";
export default function App() {
const [mouse, setMouse] = useState(false);
return (
<div className="App">
{/* :active && mouseEventListner*/}
<h4>:active && mouseEventListner</h4>
<div className="div">
<img
className="div__img"
src="https://picsum.photos/200/200"
alt="random"
onMouseDown={() => setMouse(true)}
onMouseUp={() => setMouse(false)}
/>
{mouse && <p className="div__text">copied</p>}
</div>
{/* :active && :hover */}
<h4>:active && :hover</h4>
<div className="parentDiv">
<img
className="parentDiv__childDiv1"
src="https://picsum.photos/200/200"
alt="random"
/>
<div className="parentDiv__childDiv2">copied</div>
</div>
</div>
);
}
scss:
.div{
display: flex;
&__img{
width: 5rem;
cursor: pointer;
&:active{
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
&__text{
background-color: red;
}
}
.parentDiv{
width: 6rem;
background-color: teal;
cursor: pointer;
display: flex;
flex-direction: column;
padding: 1rem;
&:hover > &__childDiv2 {
display: block;
}
&__childDiv1, &__childDiv2{
width: 6rem;
height: 6rem;
}
&__childDiv1{
background-color: white;
&:active{
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
&__childDiv2{
display: none;
background-color: red;
}
}
:active pseudo class only works when clicking.

How to use more than one custom javascript css carousel on same page?

I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>

Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

Force a table <TD> to occupy the full vertical space?

I want to show 3 boxes of content (Images + links ) inside a Table inside my SPFx react web part, here is the final result i have:-
I have the following code:-
singlenews.tsx:-
import * as React from 'react';
import styles from './SingleNews.module.scss';
import { ISingleNewsProps } from './ISingleNewsProps';
import NewsTableCell from './NewsTableCell';
export interface INews {
recentNews: ISingleNewsProps[];
featuredNews?: ISingleNewsProps[];
featured: boolean;
}
export default class SingleNews extends React.Component<INews, {}> {
public render(): React.ReactElement<INews> {
const newsTableCells = this.props.recentNews.map((post, index) => {
return (
<NewsTableCell
post={post}
rowspan={index === 0 ? 2 : 1}
/>
);
});
return (
<table>
{this.props.featured ?
<>
<tr>
{ newsTableCells[0] }
{ newsTableCells[1] }
</tr>
<tr>
{ newsTableCells[2] }
</tr>
</>
: null
}
</table>
);
}
}
newstablecell.tsx:-
import * as React from 'react';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import styles from './SingleNews.module.scss';
import { ISingleNewsProps } from './ISingleNewsProps';
export interface INewsTableCellProps {
post: ISingleNewsProps;
rowspan: number;
}
export default class NewsTableCell extends React.Component<INewsTableCellProps, {}> {
public render(): React.ReactElement<INewsTableCellProps> {
const { post, rowspan } = this.props;
return (
<td rowSpan={rowspan}>
<a
className={styles.singleNews}
href={post.link}
key={post.Title}
>
<div
className={styles.singleNews__image}
style={{ backgroundImage: `url(${post.image})` }}
/>
<div className={styles.singleNews__content}>
<div className={styles.singleNews__content__info}>
<span className={styles.singleNews__content__info__label}>{post.Featured}</span>
<span className={styles.singleNews__content__info__date}>
{post.date}
</span>
</div>
</div>
<div className={styles.singleNews__content}>
<div className={styles.singleNews__content__info}>
{(rowspan===2)?
<h2 className={styles.singleNews__content__info__title__featured}>
{post.Title}
</h2>
:
<h2 className={styles.singleNews__content__info__title}>
{post.Title}
</h2>}
{post.likes ? (
<div
className={styles.singleNews__content__info__reactions}
>
<span
className={
styles.singleNews__content__info__reactions__likes
}
>
<Icon iconName='Like' />
{post.likes}
</span>
<span className={
styles.singleNews__content__info__reactions__comments
}>
<Icon iconName='ActionCenter' />
{post.coments}
</span>
</div>
) : null}
</div>
</div>
</a>
</td>
);
}
}
SingleNews.module.scss:-
#import '~office-ui-fabric-react/dist/sass/References.scss';
#import '../../../../assets/global.module';
.featured {
flex: 2;
}
.secondary {
flex: 1;
display: flex;
flex-direction: column;
gap: 1em;
}
.singleNews {
text-decoration: none;
font-family: $font-family;
font-size: $font-size;
font-weight: $regular-font-weight;
&__image {
padding: 5em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.featured {
height: 75%;
}
}
&__content {
padding: 1em;
background-color: $white;
overflow: hidden;
border: 1px solid $medium-silver;
border-top: none;
display: flex;
flex-direction: column;
&.featured {
height: 25%;
justify-content: flex-start;
}
&__info {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 12px;
font-weight: $regular-font-weight;
color: $primary-font-color;
&__title {
font-size: 16px; //22px mob
font-weight: $semiBold-font-weight;
color: $primary-font-color;
max-width: 290px;
min-width: 135px;
margin: 15px 0 0;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 23px; /* fallback */
max-height: 46px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
&__featured {
font-size: 22px; //2.33 mobile
font-weight: $semiBold-font-weight;
max-width: 230px;
margin: 15px 0 0;
}
&__first {
font-size: 1.83em; //2.33 mobile
font-weight: $semiBold-font-weight;
max-width: 230px;
margin: 15px 0 0;
}
}
&__date,
&__label {
text-transform: uppercase;
}
&__reactions {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-self: flex-end;
margin-bottom: 5px;
&__likes {
margin-right: 10px;
}
&__likes > i,
&__comments > i {
margin-right: 5px;
}
}
}
}
#media screen and (min-width: 768px) {
&__content {
&__info {
&__title {
max-width: 230px;
&__featured {
font-size: 1.83em; //22px mob
min-width: 380px;
}
}
}
}
}
}
The above is working well, but I only issue I am facing is: how can I expand the first box (cell) to fully occupy the vertical space, as per the arrows I added to the picture?

Display inactive thumbnail as grey in CSS and Vue

When I click on a thumbnail, I'd like it to display in color and the other thumbnails as grey.
So When you click on a thumbnail is active and to illustrate I want to have the thumbnail in color, and the other thumbnails in grey because they are inactive.
This is what I'd like to achieve:
Vue.component('carousel', {
template: `
<div class="card-carousel" >
<div class="thumbnails">
<div
v-for="(image, index) in images"
:key="image.id"
:class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
#click="activateImage(index)">
<img :src="image.thumb"/>
</div>
</div>
<div class="containe-carousel">
<span> {{currentImage.text}}</span>
<div class="photoshop-screenshot">
<img :src="currentImage.big" alt="">
</div>
<div class="card-img">
<img :src="currentImage2.big2" alt="">
</div>
</div>
</div>
`,
computed: {
currentImage() {
return this.images[this.activeImage];
},
currentImage2() {
return this.images[this.activeImage];
}
},
data() {
return {
activeImage: 0,
}
},
methods: {
activateImage(imageIndex) {
this.activeImage = imageIndex;
},
},
props: ['images']
});
.section{
background-color: black;
}
.card-carousel {
user-select: none;
position: relative;
}
.containe-carousel {
padding-top: 5%;
}
.thumbnails {
display: flex;
justify-content: space-evenly;
flex-direction: row;
}
.thumbnail-image {
display: fixed;
align-items: center;
cursor: pointer;
padding: 2px;
}
.thumbnail-image > img {
width: 100%;
height: auto;
transition: all 250ms;
filter: grayscale(100%);
}
.thumbnail-image:selected> img {
box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
visibility: hidden;
filter: none;
}
.card-img {
position: relative;
}
.card-img > img {
margin: 0 auto;
padding-top: 7%;
z-index: 2;
}
.photoshop-screenshot {
position:absolute;
z-index: 1;
width: 70%;
right:-80px;
bottom:-130px;
}
.containe-carousel span {
color: white;
font-weight: bold;
box-shadow: -0.3125em 0.3125em 0 0 rgba(0, 0, 0, 0.15);
}
<section class="section" id="app">
<div class="container">
<div class="text-center" style="margin:0px 50px">
<div class="heading-underscore">
<h2 class="dk-5q-color">
<?php say("X50Q-dashboard-title"); ?>
</h2>
</div>
</div>
<div class="columns">
<div class="column ">
<div class="card-content">
<carousel
:starting-image="0"
:show-progress-bar="true"
:images="images"
></carousel>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
images: [
{
text : 'Photoshop',
id: '1',
big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
},
{
text : 'Aurocad',
id: '2',
big: '/images/das-keyboard-x50q/autocad-profile.png',
big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
thumb: '/images/das-keyboard-x50q/autocad-logo.png'
},
{
text : ' Counter-Strike',
id: '3',
big: '/images/das-keyboard-x50q/counterstrike-profile.png',
big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
},
{
text : 'League of Legends',
id: '4',
big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
}
],
}
}
});
</script>

I'd rotate the filter from .thumbnails to .thumbnail-image>img instead and add a filter: none; to .thumbnail-image:active>img
Your CSS should look like this:
.thumbnails {
display: flex;
justify-content: space-evenly;
flex-direction: row;
}
.thumbnail-image {
display: fixed;
align-items: center;
cursor: pointer;
padding: 2px;
}
.thumbnail-image>img {
width: 100%;
height: auto;
transition: all 250ms;
filter: grayscale(100%);
}
.thumbnail-image:active>img {
box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
visibility: hidden;
filter: none;
}
The problem is that when you add the grayscale filter to the container of class thumbnails, you are essentially overwriting anything that may have been set inside. If you want to affect the thumbnail images, you should make it as specific as possible, that's why .thumbnail-image>img is your primary target. Furthermore, when you click on the thumbnail you need to undo this change so .thumbnail-image:active>img is your override.

To achieve the wished result add this attribute class="active" to the img tag as follow:
<img :src="image.thumb" class="active"/>
and add the following rule to your CSS :
.active{
filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ;
border:3px solid #fff;
}
this gives a light green color but you could change the filter functions to achieve the desired colour.

React: Child Component div is also applied to sibling. Why?

This is the render method of one of my components:
render() {
return (
<div className="left col-xs-12 col-md-6">
<Dropdown show={this.state.showDropdown}/>
{this.props.children}
</div>
);
}
It's just a div with a full screen dropdown menu, and some children. When showDropdown===true, the dropdown menu is shown. Now in one of the pages in which this component is used, the immediate child has a some issues with formatting, so I included a padding: 50px. This solved the issue. But now my Dropdown component also gets the padding of 50px, which moves my Dropdown Menu Items down and ruins the formatting of the Dropdown - but I don't know why? Is this normal behaviour?
CSS of the parent:
.left {
display: flex;
justify-content: center;
align-items: center;
// background-color: MediumSpringGreen;
background-color: $color_left;
height: auto;
min-height: 100vh;
z-index: 1;
#include media-breakpoint-up(md) {
height: 100vh;
}
}
Code of child
render() {
return (
<div className="row">
<Loader show={this.state.loading} />
<Left>
<div className="about_padding">
<p className="red big-box-text-two">Text text text</p>
<a className="menu-link statementbox" id="menu-statement" href="./pdf/statement.pdf" download="statement.pdf">
<p className="menu-link-text">our statement</p>
<img className="img-fluid download-img" src={imgDownload} alt="download"></img>
</a>
</div>
</Left>
}
CSS of the child:
.statementbox {
margin-top: 20px !important;
}
.about_padding {
padding-left: 15%;
padding-right: 15%;
//I was trying to add padding-top here, but it also pushes down my Dropdown
#include media-breakpoint-down(xs) {
padding-left: 10%;
padding-right: 10%;
}
}
Code of the Dropdown:
const Dropdown = ({show}) =>
<div className="dropdown"
style={{
visibility: show ? "visible" : "hidden",
opacity: show ? 1 : 0
}}>
<Link to="/">Home</Link>
<Link to="/menus/">Menus</Link>
<Link to="/about/">About us</Link>
<Link to="/contact/">Contact</Link>
</div>
CSS of the Dropdown:
.dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 40px;
background-color: #FFD826;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
a {
color: #f42528 !important;
}
}