I have the following .scss file:=
.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%;
}
}
}
so how i can define the featured? i tried the following but all failed:-
import styles from './SingleNews.module.scss';
//code goes here...
<div className={styles.singleNews__image__featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image.featured} style={{ backgroundImage: `url(${post.image})` }}/>
&.featured selects the the parent selector with the class featured, which means that the div need have the classes singleNews__image and featured
.singleNews__image.featured {
background-color: blue;
width: 100px;
height: 100px;
}
/* Same selector with Sass */
/*
.singleNews {
&__image {
&.featured {
background-color: blue;
width: 100px;
height: 100px;
}
}
}
*/
<div class="singleNews__image featured">
</div>
Related
I have a pretty simple website, which renders a background image, a header, a footer, and some body text.
When I view the site from Google Dev Tools mobile inspector. The text sits above the footer as expected. When I view the site from an actual iphone the text is shown at the very bottom of the page (behind the footer).
App.js
return (
<div className={style.app}>
<Header setNav={setNav} nav={nav} />
<Routes>
<Route
exact
path="/"
element={
<Mobile
setNav={setNav}
nav={nav}
menuList={menuList}
setFilter={setFilter}
/>
}
/>
<Route
exact
path="/directions"
element={
<Directions
setNav={setNav}
nav={nav}
filter={filter}
setFilter={setFilter}
menuList={menuList}
/>
}
/>
</Routes>
<MobileNavOneButton setNav={setNav} setFilter={setFilter} />
</div>
);
the css for style.app is:
.app {
background-image: url("../CompanyImages/Port507BackgroundImage.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
position: fixed;
height: 100vh;
width: 100vw;
max-height: 100vh;
max-width: 100vw;
background-size: cover;
z-index: -999;
}
Mobile.js
import React from "react";
import style from "./Mobile.module.css";
const Mobile = () => {
return (
<div className={style.app}>
<div className={style.mainContent}>
<div className={style.address}>128 W 2nd St, Winona, MN 55987</div>
</div>
</div>
);
};
export default Mobile;
css for mobile.js
html,
body {
margin: 0;
/* height: 100% */
}
.app {
height: calc(100vh - 8rem);
width: 100vw;
background-size: cover;
display: flex;
justify-content: center;
margin-top: 5rem;
}
.mainContent {
text-align: center;
color: white;
width: 100%;
display: flex;
align-self: flex-end;
margin-bottom: 1.5rem;
margin-left: 1rem;
}
Footer.js
import React from "react";
import { useNavigate } from "react-router-dom";
import style from "./MobileNavOneButton.module.css";
import HomeIcon from "#mui/icons-material/Home";
import ExploreIcon from "#mui/icons-material/Explore";
const MobileNavOneButton = ({ setNav }) => {
const navigate = useNavigate();
return (
<div className={style.NavBar}>
<div
className={style.NavButton}
onClick={() => {
navigate("../directions", { replace: true });
setNav(false);
}}
>
<ExploreIcon style={{ fontSize: "1.25rem", color: "#000000" }} />
<div className={style.buttonText}>Directions</div>
</div>
</div>
);
};
export default MobileNavOneButton;
css for the footer
.buttonText {
font-size: 0.75rem;
font-family: Montserrat-Light;
text-decoration: none;
color: black;
}
.NavBar {
width: 100%;
float: none;
display: flex;
height: 3rem;
overflow: hidden;
position: fixed;
bottom: 0;
z-index: 999;
background-color: rgba(150, 150, 150, 0.8);
}
.NavButton {
align-items: center;
justify-content: center;
/* border: 1px solid black; */
/* background-color: rgba(150, 150, 150, 0.8); */
border-radius: 0;
float: left;
display: flex;
flex-direction: column;
font-size: 1rem;
font-family: Montserrat-Light;
text-align: center;
width: 100%;
text-decoration: none;
color: #222222;
}
.NavButton:focus {
outline: none !important;
outline-offset: none !important;
}
The website can be seen here. Note: you will be redirected if viewing from a browser (need to be in Dev Tools mobile)
Website
I have this going in react bootstrap. I have movie cards which consist of a picture, some text and a button. I need all of the cards to be equal height but the data inside keeps overflowing. It is built with bootstrap because it was a bootcamp project and I need to polish it up. I am trying to use flexbox for the cards but am having trouble.
EDIT:
I want the cards to remain the same so the text can overflow but it needs to stay hidden and not show partial text.
What I want (Notice how the text cuts off and there is no partial text showing)
<Card className="cardClass">
<div style={{textAlign: 'center'}}>
<Card.Img className="card-image" variant="top" src={movie.ImagePath} />
</div>
<Card.Body>
<div className="card-text-body">
<Card.Title>{movie.Title}</Card.Title>
<Card.Text>{movie.Genre.Name}</Card.Text>
<Card.Text className='card-description'>{movie.Description}</Card.Text>
<Link to={`/movies/${movie._id}`}>
<Button className="movieCard-btn" variant="primary">View Movie</Button>
</Link>
</div>
</Card.Body>
</Card>
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
}
.cardClass {
max-width: 100%;
height: 400px;
}
.card-image{
width: 100px;
height: 150px;
object-fit: cover;
text-align: center;
}
.card-title {
font-weight: 900;
}
.card-text-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.card-description {
font-size: 13px;
overflow: hidden;
}
.card-body {
font-weight: 400;
}
.movieCard-btn {
width: 100%;
margin-top: 1rem;
}
.btn .btn-primary {
text-align: center!important;
}
.btn-primary {
color: black;
background-color: goldenrod;
border-color: black;
}
.btn-primary:hover {
color: black;
background-color: goldenrod;
border-color: black;
}
a {
text-decoration: none!important;
}
Two approaches here:
First
Limit the description characters, something like:
let description = movie.description;
if (description.length > 120) {
description = description.substring(0, 120);
}
Or
Card must be 100% height to fill remaining space.
Your title set to flex-grow: 1, in order to push everything down below.
Don't forget to set height on description box and also overflow: hidden;
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
height: 100%;
}
.card-title {
font-weight: 900;
flex-grow: 1;
}
.card-description {
font-size: 13px;
overflow: hidden;
height: 100px;
}
I'm trying to rotate the arrow image when it's focus but doesn't work.
I want to rotate just the arrow image. When I put scss focus code in other class, it works.
react.js to make button component.
function LinkButton ({title, icon}, children) {
return (
<button className="btn">
{/* TODO: only when node has children, show the arrow image */}
<img className={`menu-arrow-img`} src={arrow} alt="" />
<img className="icon" src={icon} alt="" />
<div className="btn-title">
{title}
</div>
</button>
);
};
sass
#mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
width: 180px;
height: 40px;
font-size: 14px;
color: #3b4757;
background-color: white;
border: 0;
border-radius: 0 100px 100px 0;
cursor: pointer;
.menu-arrow-img {
width: 16px;
height: 13px;
&:focus {
#include transform(rotate(90deg));
}
}
.icon {
width: 15px;
}
.btn-title {
width: 120px;
}
&:hover {
background-color: #ebeff8;
}
&:focus {
background-color: #ebeff8;
}
}
is there something wrong that I missed? And how can rotate just the arrow image?
You should add the transform to the icon, when the button is focused
So it should be:
.btn:focus {
.menu-arrow-img {
#include transform(rotate(90deg));
}
}
I need to darken the background of an image but not its contents inside like the below picture. The image is being painted programatically so I cannot have its url in the css.
Below how it should look like:
And now how it´s looking for me, I need the characters much whiter:
I´ve looked at different answers using ::before or ::after but given my image is being rendered inline it does not work. Below my code.
REACT.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
Any idea on what to do?
Thanks a lot!
Try the following:
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
<div className='color-overlay'/>
</div>
</div>
</Link>
))}
And CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.apartmentText {
color: white;
font-weight: bold;
}
.apartmentText, .subApartmentText {
position: relative;
z-index: 1;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.3);
pointer-events: none;
}
I tried it and it worked for me, but locally I made some changes, so I can load an image. Please let me know if something is not working, so I can double check if I copied all the code correctly.
have you tried this with css?
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),
My site loads a background image with 100vh as the landing page. Right below out of initial view is the navbar and when the user scrolls down I wan't the navbar to stick to top of the page once it reaches the top. I'm using React.js with Bootstrap 4. Here is the Stackblitz as well as JS and SCSS below. I've put the sticky-top class on the nav element but it's not working, what might I be doing wrong?
This is the index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.scss';
class App extends Component {
render() {
return (
<div className='App'>
<section id='home' className='home'>
<div className='home__background'>
<div className='dark-overlay'>
<h1>Background Image using CSS</h1>
<div className='home__background__content'><h3>Text</h3><button>Go To About</button></div>
</div>
</div>
<nav className='navbar user-nav sticky-top'>
<div className='user-nav__links'>
<a href='#home' className='user-nav__links__link active'>
Home
</a>
<a href='#section2' className='user-nav__links__link'>
Section2
</a>
<a href='#section3' className='user-nav__links__link'>
Section3
</a>
<a href='#section4' className='user-nav__links__link'>
Section4
</a>
<a href='#section5' className='user-nav__links__link'>
Section5
</a>
</div>
</nav>
</section>
<section id='section2' className='section2'>
<p>section2</p>
</section>
<section id='section3' className='section3'>
<p>section3</p>
</section>
<section id='section4' className='section4'>
<p>section4</p>
</section>
<section id='section5' className='section5'>
<p>section5</p>
</section>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Here is the style.scss
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
font-size: 62.5%;
}
.home {
&__background {
height: 100vh;
//background-image: url('./img/bg1.jpg');
background-size: cover;
overflow: hidden;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 30%;
}
}
}
.user-nav {
width: 100%;
background-color: black;
text-transform: uppercase;
padding: 2rem;
margin-right: 2rem;
a {
text-decoration: none;
}
&__links {
height: 100%;
&__link {
height: 100%;
font-size: 1.7rem;
color: white;
margin-right: 5rem;
line-height: 100%;
&:hover {
color: lightblue;
}
}
}
.active {
color: orange;
}
}
.section2 {
height: 400px;
}
.section3 {
height: 500px;
}
.section4 {
height: 400px;
}
.section5 {
height: 500px;
}
Solved! I took the navbar out of the section tag and put it after.