I've dived last weeks a bit more into react.js with Gatsby and Prismic. I've created blog cards which I display using flex: wrap (Check the image) , now I want to display my blog cards horizontal.
If I do nowrap:
MY CODE:
Cardlist.js:
<React.Fragment>
<div className="cardslist">{children}</div>
{/* --- STYLES --- */}
<style jsx>{`
.cardslist {
text-align: center;
}
#from-width desktop {
.cardslist {
display: flex;
flex-wrap: wrap
}
}
`}</style>
</React.Fragment>
Try this: flex-direction: row;
Related
I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.
This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>
I create two components in React, and I want to display them both on the App component.
While they do show on the page, I can't use CSS to give each of them flex for example.
I want each component to take half of the screen size, this is what I have:
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney id="Top-journey-section" />
<JourneysSection id="Journeys-section" />
</div>
);
}
export default App;
This is the App.css:
.App {
text-align: center;
display: flex;
flex-direction: column;
}
#Top-journey-section {
flex: 1;
}
#Journeys-section {
flex: 1;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
What is going wrong here?
You are passing id as a prop to your component, but you are not using it.
Wrong:
<TopJourney id="Top-journey-section" />
Good:
function TopJourney({id}) {
<div id={id}>your component stuff</div>
}
Your selectors id or className only works on native HTML elements, not on Components, try adding styles on HTML dom elements instead. For components, these are just regular props that you can use within the component.
This is a confusion of css flexbox column and row. it should be row and change the id into className, then.... change the css file as well below.
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney className="Top-journey-section" />
<JourneysSection className="Journeys-section" />
</div>
);
}
export default App;
CSS file should be looks like this
.App {
text-align: center;
display: flex;
flex-direction: row;
width:100%;
}
.Top-journey-section {
width:50%;
}
.Journeys-section {
width:50%;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
I am using ReactJS create-react-app to build a website. I'm trying to center an image on my homepage horizontally across the screen using css, but it is remaining aligned left.
I have the .jpg being imported into a .js file with a class declaration and it appears on the page but it doesn't follow the class modifications I am making in my index.css file.
//in Cur.js file
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
//in index.css file
.center{
text-align: center;
display: block;
justify-content: center;
align-items: center;
margin: auto;
width: 100%;
}
<Image
img src={cur} alt="cur"
height={350}
width={700}
style={{ alignSelf: 'center' }}
/>
You may separate the inline style, or use styled-components instead
Set a class name for the div eg. className="container-div"
And style it in your css style sheet.
.container-div{
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
The height and width properties will ensure your container covers the whole screen .
try this.. the property is called className not class
import React from 'react';
import Image from 'react-image-resizer';
import from "index.css"
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
html:
<div className="image-container">
<img src={logo} alt="logo"/>
</div>
css file:
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
React uses className instead of class.
Change
img src={cur} alt="cur" class="center"
to
img src={cur} alt="cur" className="center"
my problem was missing display: flex in my css styles. adding it to the rest of styles, solved my problem.
In parent div css add:
.parent {
display: flex;
justify-content: center;
}
This will center your image.
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image src={cur} alt="cur" className="center"/>
</div>
);
}
export default Cur;
body,html{
height:100%,
min-height:100%
}
.center{
text-align:center;//for texts
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
How to make an angular 2 material md-radio button vertical and change and default colour. I tried this link and I was not able to make it display vertically
my code:-
<md-radio-group ng-model="data.group1" layout-align="start start">
<md-radio-button ng-value="green" class="my-radio" *ngFor="let schedule of schedules" value={{schedule}} (click)="postSchedule(schedule)" ng-style="{'display':'list-item'}">{{schedule}}</md-radio-button>
</md-radio-group>
css:-
md-radio-button ._md-container {
top: 0;
transform: translateY(0);
}
You may have to try to use flex-box properties. Try below code
.my-radio {
display: -webkit-box;
display: -webkit-flex;
display: flex-box;
flex-direction: column;
}
Cf deleted post on this page by Pengyy which works for me:
You can add a custom style as below for md-radio-group.
.radio-group {
display: inline-flex;
flex-direction: column;
}
is there a way to use CSS Scroll Sap Points in an ionic-content or ion-scroll? Something like this:
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100%);
I would like to have some vertical fullpage-scroll in a ion-slide-page (using horizontal ion-slides).
Any help is HIGHLY appreciated
Well worth revisiting this now in 2020 as scroll snap is widely supported. I created a reusable vertical scroll class like so:
.vertical-scroll {
flex-basis: 50%;
max-height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.vertical-scroll > * {
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: center;
}
And then just place that inside of your Ionic Content, with the children content of vertical-scroll being the items you want to scroll, for example:
const loadNews = () => {
return (
<div className="vertical-scroll">
{[...Array(n)].map((e, i) => (
<LatestNewsCard
date="24 hours ago"
title="UFC 'Halifax' results and play-by-play!"
className="full-height"
key={i}
/>
))}
</div>
);
};