How to use data-theme in CSS - javascript

I'm trying to add Dark Mode to my website, which is built in React, that I've created, and while I don't want to create an actual Dark Mode, I want to add lazy dark mode using filter: invert(1) in CSS.
The issue came mainly when trying to communicate between the TSX file and CSS file to check which mode do I want to show, and trying to use data-theme doesn't seem to work for me.
My App.tsx is as follows:
function App() {
const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const [theme, setTheme] = useLocalStorage('theme', defaultDark ? 'dark' : 'light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
console.log(theme);
}
return (
<div className="outer-container" id="outer-container" data-theme={theme}>
<Sidebar />
<button onClick={toggleTheme}>
Click here to switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
<div className='page'>
<Outlet />
</div>
<Footer />
</div>
);
}
export default App;
(I do have certain imports but all the components are different file)
My App.css is as follows:
.outer-container {
display: flex;
flex-direction: column;
min-height: 85vh;
}
.page {
flex: 1;
}
footer {
position: relative;
margin: 0 1rem;
}
footer .row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
hr {
height: 0px;
margin: 0;
border: 1px solid #000000;
}
p#p1 {
position: absolute;
width: 20vw;
height: 34px;
left: 19px;
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
/* or 12px */
color: #000000;
}
p#p2 {
position: absolute;
width: 20vw;
height: 34px;
left: calc(50vw - 10vw);
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
/* or 12px */
color: #000000;
}
p#p3 {
position: absolute;
width: 20vw;
height: 34px;
left: calc(100vw - 20vw);
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
color: #000000;
}
div.main {
position: absolute;
width: 20vw;
height: 34px;
top: 5vw;
left: calc(100vw - 20vw);
}
a.social {
margin: 0 1rem;
transition: transform 250ms;
display: inline-block;
align-items: center;
}
a.social:hover {
transform: translateY(-2px);
}
a.youtube, a.youtube:hover {
color: #eb3223;
}
a.github, a.github:hover {
color: #24292e;
}
a.discord, a.discord:hover {
color: #7289da;
}
html[data-theme='dark'] {
filter: invert(1) hue-rotate(180deg);
}
(I'm not sure if it matters and hence I've shown the whole thing, but the important thing is the last one; also I do have some CSS for internal components)
However, even so, when I click on the button, nothing changes, even though the value of the theme changes. How would I fix this?
Thank you :)

Related

React Component CSS not toggling component styles

I'm creating a React Notes App with the feature to switch between Dark/Light Mode.
So basically I've written a React Toggle to switch between Dark and Light Mode.
But apparently the code is only switching the background and h1 color and not switching the notes color as I want .
Apparently the component color doesn't seem to change.
Toggle.js toggles the classname between 'theme-dark' and 'theme-light' and in turn toggles the CSS too. But it doesn't seem to change the CSS of notes component.
Toggle.js:
import React, { useEffect, useState } from 'react';
import '../index.css';
import { setTheme } from '../theme';
import { MdDarkMode, MdOutlineDarkMode } from 'react-icons/md'
function Toggle() {
const [ togClass, setTogClass ] = useState('dark');
let theme = localStorage.getItem('theme');
const handleOnClick = () => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
setTogClass('light')
} else {
setTheme('theme-dark');
setTogClass('dark')
}
}
useEffect(() => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTogClass('dark')
} else if (localStorage.getItem('theme') === 'theme-light') {
setTogClass('light')
}
}, [theme])
return (
<div className="container--toggle"> {
<button
id="toggle"
className={"toggle--button "+togClass}
onClick={handleOnClick}
>
{togClass === 'light' ? <MdOutlineDarkMode size='1.5rem' /> :
<MdDarkMode size='1.5rem'/>}
</button>
}
<label htmlFor="toggle" className="toggle--label">
<span className="toggle--label-background"></span>
</label>
</div>
)
}
export default Toggle
theme.js
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function keepTheme() {
if (localStorage.getItem('theme')) {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-light')
}
} else {
setTheme('theme-dark')
}
}
export {
setTheme,
keepTheme
}
I'm certain the React Toggle.js works fine. Do note that I'm a newbie in CSS Variables ( you can probably tell ) and I think that's where the code messes up.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.theme-light {
--dark-text: black;
--light-text: #5E4B56;
--dark-background: #FFCFDF;
--light-background: #FFCFDF;
--accent: #DBE7E4;
--button-border: #5E4B56;
--note: #E0F9B5;
--note-new: #A5DEE5;
}
.theme-dark {
--dark-text: #EEEEEE;
--light-text: #F9F8F8;
--dark-background: #222831;
--light-background: #586F7C;
--accent: #B8DBD9;
--button-border: #B8DBD9;
--note: #EEEEEE;
--note-new: #00ADB5;
}
#root {
background-color: var(--dark-background);
color: var(--dark-text);
}
.toggle--button {
cursor: pointer;
}
.toggle--button.dark {
border: none;
--dark-background: #222831;
background-color: var(--dark-background);
}
.toggle--button.light {
border: none;
background-color: var(--dark-background);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
textarea {
color: var(--dark-text);
border: none;
resize: none;
background-color: var(--note-new);
}
textarea:focus {
outline: none;
}
.save {
size: 10rem;
background-color: #e1e1e1;
border: none;
border-radius: 15px;
padding: 5px 10px 5px 10px;
}
.save:hover {
background-color: #ededed;
cursor: pointer;
}
.note {
color: var(--dark-text);
background-color: var(--note);
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}
.note-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.notes-list {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
);
}
.note.new {
background-color: var(--note-new);
}
.delete-icon {
cursor: pointer;
}
.search {
display: flex;
align-items: center;
background-color: rgb(233, 233, 233);
border-radius: 10px;
padding: 5px;
margin-bottom: 1.5em;
}
.search input {
border: none;
background-color: rgb(233, 233, 233);
width: 100%;
}
.search-icons {
color: black;
}
.search input:focus {
outline: none;
}
Light Mode:
Dark Mode:
I want the dark mode to switch colors of notes from light mode ones.
This is how I want it to look:
Error on my side, my App.js file had classname set to theme-light which prevented overriding.

Set viewport width where text starts to wrap

I'm looking for a way in CSS (or JS but preferably CSS) to define the breakpoint where text starts to wrap. I'm using React 17/CRA and CSS modules.
I have a React app that has a header bar with two pieces of content. On the left-hand side is the three-word title of the app in an h1 tag. On the right-hand side is the logged-in user's profile photo and name, composed of several elements within a span. If I narrow the viewframe, first the content overflows and then, if I narrow it more, the title of the app starts to wrap.
I would like the title to wrap before any overflow happens so all the content stays on the screen as long as possible. All the Googling I've done has only come up with info on overflow-wrap or word-break, which aren't what I'm looking for. The text is wrapping like I want it to, I'd just rather it did so sooner.
The code of my component is:
import React from 'react'
import anonymousAvatar from './anonymousAvatar.jpg'
import styles from './dashboardHeader.module.css'
const DashboardHeader ({data}) => (
<div className={styles.root}>
<div className={styles.bar}>
<span className={styles.headerContainer}>
<h1 className={styles.header}>Three Word Title</h1>
</span>
<span className={styles.profile}>
<div className={styles.profileText}>
<p className={styles.textTop}>{data.name}</p>
<p className={styles.textBottom}>{data.email}</p>
</div>
<img className={styles.avatar} src={data.image_url || anonymousAvatar} alt='User Avatar' referrerPolicy='no-referrer' />
</span>
</div>
</div>
)
export default DashboardHeader
The CSS module I currently have is:
.root {
position: fixed;
top: 0;
width: 100%;
}
.bar {
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
}
.headerContainer {
display: grid;
align-items: center;
}
.header {
font-family: 'Cinzel Decorative', sans-serif;
margin: 0;
font-size: 1.5rem;
}
.profile {
background-color: #000;
border: none;
display: grid;
align-items: center;
grid-template-columns: 2fr 1fr;
max-width: 30%;
cursor: pointer;
margin-right: 16px;
}
.profileText {
display: grid;
}
.textTop, .textBottom {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: #fff;
text-align: right;
margin: auto 0;
}
.textTop {
margin-bottom: 2px;
}
.textBottom {
margin-top: 2px;
}
.avatar {
height: 64px;
width: 64px;
border-radius: 50%;
box-shadow: 0px 0px 12px #fff;
margin-left: 24px;
margin-right: 16px;
}
Here is the component at the full width of my laptop screen:
Here it is at an intermediate width:
And here it is at the very narrow width where the text finally starts to wrap (notice there is still overflow):
As noted in the comments you can simply change the width of the element at your desired breakpoint like in the top blue div of the example below. I'm using animations to help you visualize the results but you would decrease the width of the element in question at your media query breakpoint. I recommend this method because it doesn't require you to increase your HTML markup.
body, div, p, span {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
font-family: Arial;
}
div {
justify-content: space-between;
transform: translateY( -5rem );
position: absolute;
width: 90%; height: 5rem;
padding: 1rem;
background-color: #222; color: #eee;
}
div, div:nth-of-type( 1 ) p:first-of-type {
animation-name: contract; animation-duration: 5s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
div:nth-of-type( 2 ) {
transform: translateY( 5rem );
}
#keyframes contract { 100% { width: 25%; } }
p {
background-color: transparent;
text-transform: uppercase;
}
p:first-of-type {
font-size: 1.5rem; font-weight: bold;
}
span {
margin: 0.5rem;
border-radius: 50%;
width: 2.5rem; height: 2.5rem;
}
<style>
* {
box-sizing: border-box; padding: 0; margin: 0;
}
html, body {
height: 100%;
}
html {
font-size: 0.5rem;
}
div:nth-of-type( 1 ) p:first-of-type::before,
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps first';
position: absolute; top: -4rem;
border-radius: 1rem; padding: 1rem;
background-color: #07f; white-space: nowrap;
}
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps last';
top: auto; bottom: -4rem;
background-color: #f07;
}
</style>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
I'm simply using the contract animation to manually decrease the width of the paragraph in the first div before it's width is forced smaller by its container. If this doesn't work in your particular setup you could use hidden <br> elements with display: none until your desired breakpoint to set them to block.

Fixing react-responsive-carousel display on mobile

I'm still a beginner with ReactJS and I need to create a Carousel that is responsive, the way I need to leave is like this:
I was able to create Carousel on both desktop and responsive using the react-responsive-carousel library.
The problem is that in the mobile format, when I pass the slides of each Carousel, the expected behavior is not happening. When I click to show the next slide, in Carousel it still shows the current slide, and just a piece of the next slide.
It is easier to explain by showing a short gif I made, notice what happens when I click to show the next slide.
When it is in the desktop format, Carousel works the right way, I also created a small gif to show it.
Can you tell me what you’re doing wrong so that Carousel is working that way?
import React from "react";
import PropTypes from "prop-types";
import "./carousel.scss";
import { Carousel as CarouselLib } from "react-responsive-carousel";
import { CAROUSEL_ITEMS } from "./Carousel.utils";
const Carousel = ({ subtitle, testID, title }) => {
const items = React.useMemo(
() =>
CAROUSEL_ITEMS.map((item) => (
<div key={item.id}>
<div className="images">
<img className="image" src={item.url} alt="" />
</div>
<div className="infos">
<h3>{item.title}</h3>
<span>{item.subtitle}</span>
</div>
</div>
)),
[]
);
return (
<div data-testid={`${testID}_Container`} className="carousel-container">
<div className="carousel-header">
<h5>{subtitle}</h5>
<h3>{title}</h3>
</div>
<div className="carousel-content">
<CarouselLib
centerMode
showStatus={false}
dynamicHeight={false}
emulateTouch
swipeScrollTolerance={50}
centerSlidePercentage={30}
showThumbs={false}
infiniteLoop
showIndicators
renderArrowPrev={(onClickHandler, hasPrev, label) =>
hasPrev && <div />
}
renderArrowNext={(onClickHandler, hasNext, label) =>
hasNext && (
<button
type="button"
onClick={onClickHandler}
className="custom-arrow"
data-testid={`${testID}_Button_Next`}
/>
)
}
>
{items}
</CarouselLib>
</div>
</div>
);
};
Carousel.propTypes = {
subtitle: PropTypes.string,
testID: PropTypes.string.isRequired,
title: PropTypes.string
};
Carousel.defaultProps = {
testID: "Carousel",
subtitle: "READ OUR CLIENT",
title: "CASES"
};
export default Carousel;
.carousel {
&-container {
.images {
background-color: #fff;
width: 100%;
max-width: 416px;
height: 280px;
.image {
width: 100%;
height: auto;
background-position: center center;
background-repeat: no-repeat;
}
#media (max-width: 600px) {
max-width: 270px;
height: auto;
}
}
.infos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
h3 {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 2.5rem;
letter-spacing: normal;
font-style: normal;
font-weight: normal;
font-stretch: normal;
margin: 24px 0 20px 0;
#media (max-width: 600px) {
font-size: 1.5rem;
}
}
span {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 1rem;
letter-spacing: normal;
font-style: normal;
font-weight: 500;
font-stretch: normal;
text-transform: uppercase;
margin-bottom: 30px;
#media (max-width: 600px) {
font-size: 0.625rem;
}
}
}
.carousel {
.slide {
background-color: transparent !important;
#media (max-width: 1024px) {
min-width: 50% !important;
}
#media (max-width: 600px) {
min-width: 90% !important;
}
}
.control-dots {
.dot {
border-radius: 0 !important;
background-color: #000 !important;
width: 33px !important;
height: 3px !important;
box-shadow: none !important;
opacity: 1 !important;
&.selected {
height: 7px !important;
}
&:focus {
outline: none !important;
}
}
}
}
}
&-header {
color: #000;
font-family: 'Alliance2';
font-weight: 300;
margin: auto;
max-width: 1300px;
text-transform: uppercase;
#media (max-width: 960px) {
align-items: center;
display: flex;
flex-direction: column;
}
h5 {
font-size: 1rem;
font-weight: bold;
margin: 0;
}
h3 {
height: 80px;
margin-top: 13px;
margin-bottom: 44px;
color: #000;
font-size: 3.5rem;
line-height: 1.04;
letter-spacing: -1.1px;
#media (max-width: 960px) {
font-size: 1.87rem;
}
#media (max-width: 600px) {
margin-bottom: 0;
}
}
}
&-content {
margin: auto;
max-width: 1440px;
width: 100%;
.custom-arrow {
position: absolute;
top: 7em;
bottom: auto;
right: 4.3em;
background-color: transparent;
border: none;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
width: 67px;
height: 67px;
transform: rotate(225deg);
cursor: pointer;
&:focus {
outline: none !important;
}
}
}
}
Thank you very much in advance for any help/tip.
I don't know react-responsive-carousel , I'm using react-slick (here) in my projects and I never had a problem with the responsive.
I had a similar trouble with this lib, i solved the mobile question adding a few lines of CSS to the main div of my Carousel component:
#media only screen and (max-width: 600px) {
.carousel-wrapper{
max-width: 100%;
}
}

Toggle between 2 divs - visibility and css animation

In my site, I have two divs within a container. One div has text in English and the other has text in mandarin I have a button on the side that I want the user to toggle and control the visibility of each div/language they are comfortable with. I'm using JS to add/remove class visibility (opacity and display). By default, I have the English one in view. My sketch works halfway, when a user clicks the button, the English div fades but the mandarin one doesn't appear. Code below-
HTML -
<div class="textSection">
<div class="eng about" id="eng">
<p>SHEK LEUNG
</p>
</div>
<div class="mandarin about" id="man">
<p>
「為Samson畢業後在倫敦創立的品牌
</p>
</div>
</div>
<button class="langChange">⥃</button>
css -
.textSection {
width: 50vw;
height: 80vh;
position: relative;
top: 10vh;
left: 30vw;
display: flex;
justify-content: center;
align-items: center;
}
.about {
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
box-sizing: border-box;
transition: all 1s;
}
.eng {
border-radius: 10px;
background: url("72ppi/Asset\ 3.png");
background-size: 100% 100%;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.2rem;
line-height: 1.7;
text-align: justify;
text-transform: uppercase;
color: white;
padding: 3rem;
opacity: 1;
display: block;
}
.mandarin {
font-family: Hiragino Sans GB;
font-size: 1.3rem;
line-height: 2;
text-align: justify;
text-transform: uppercase;
font-weight: bold;
color: black;
padding: 3rem;
opacity: 1;
border-radius: 10px;
border: solid 2px black;
opacity: 0;
display: none;
}
.hidden {
display: none;
}
.visuallyhidden {
opacity: 0;
}
.seen {
display: block;
}
.visual {
opacity: 1;
}
.langChange {
position: absolute;
border: none;
padding: 1rem 2rem;
border-radius: 10px;
margin: 0;
text-decoration: none;
font-size: 2rem;
left: 20vw;
cursor: pointer;
background-color: transparent;
color: black;
}
JS -
let engBox = document.getElementById('eng'),
manBox = document.getElementById('man')
langbtn = document.querySelector('.langChange');
langbtn.addEventListener('click', function () {
console.log(engBox.classList);
if (engBox.classList.contains('hidden')) {
engBox.classList.remove('hidden');
setTimeout(function () {
engBox.classList.remove('visuallyhidden');
}, 20);
} else {
engBox.classList.add('visuallyhidden');
engBox.addEventListener('transitionend', function (e) {
engBox.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
langbtn.addEventListener('click', function () {
console.log(manBox.classList);
if (manBox.classList.contains('seen')) {
manBox.classList.remove('seen');
setTimeout(function () {
manBox.classList.remove('visual');
}, 20);
} else {
manBox.classList.add('seen');
manBox.addEventListener('transitionend', function (e) {
manBox.classList.add('seen');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
Start simple and build up. Here is a minimal working visibility toggle. Position changes, layout, and most timing can be added to the CSS piece by piece until you have what you want.
const engBox = document.getElementById('eng');
const manBox = document.getElementById('man');
const langbtn = document.querySelector('.langChange');
langbtn.addEventListener('click', function () {
engBox.classList.toggle('transparent');
manBox.classList.toggle('transparent');
});
.about {
overflow: hidden;
transition: all 2s;
}
.transparent {
opacity: 0;
}
<div class="textSection">
<div class="eng about" id="eng">
<p>SHEK LEUNG
</p>
</div>
<div class="mandarin about transparent" id="man">
<p>
「為Samson畢業後在倫敦創立的品牌
</p>
</div>
</div>
<button class="langChange">⥃</button>
</div>

alignment not working in react for footer

I am trying to get a footer properly but I can't get the result, I expect
here is what I expect to have:
below is what I have:
The copyright text is lost somewhere on the right. You can't see it as background is white.
here is the code:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '#fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
and the css
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
Any idea How to properly center everything and make sure I have 2 lines.
Thanks
The copyright text is lost somewhere on the right. You can't see it as
background is white
Its because .container has position: absolute
You can put copyright div inside container (and apply necessary changes to make it appear below .navbar) or get rid of position: absolute
Any idea How to properly center everything and make sure I have 2
lines.
As you are using display: flex there are two properties which allow you to align stuff in vertical/horizontal way justify-content, align-items ( they depend on flex-direction though )
Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.
Or manually add these styles to a .container selector
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

Categories