I build samsung home page. In basic header and slides I add one div:
<div className="samsung">
<div className="samsung__main">
<Header />
<Slides />
</div>
</div>
and I add some style:
.samsung__main{
display: flex;
height: 100vh;
flex-direction: column;
}
In Slides components I use antd Carousel. But it didnt get height: 100%:
import React from 'react'
import './Carousel.css'
import {Carousel} from 'antd'
import carouselLink from '../../asserts/carousel_1.png'
const Slides = () => {
return (
<div style={{flex: '1', height: '100%'}}>
<Carousel style={{ height: '100%' }}>
<div style={{
backgroundImage: `url(${carouselLink})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '100%'
}}>
<h1>Galaxy S22 Ultra</h1>
<p>Get $100 instant Samsung Credit toward other offers during checkout.<sup>ƾ</sup> Plus, get up to $1000 enhanced trade-in credit. From $199.99 <s>$1199.99</s> with eligible trade-in.<sup>θ</sup></p>
</div>
</Carousel>
</div>
)
}
export default Slides
How to fix it? I cannot change css style
Related
I am having a logo where I need to center align it and need to draw horizontal line below the logo and after that horizontal line I need to place some content and after the content again I need to draw horizontal line. Below that I need to have a button. I have placed the logo center but I couldn't bring the horizontal lines and images one below the other. Could any one help me to resolve this issue. Thanks in advance!
OutPut I need is :
LOGO
--------------------------------------------------
Some Content
--------------------------------------------------
BUTTON
But I am getting like below :
LOGO --------------------------------------------------
BUTTON
function ModalComp() {
//Modal state
const [show, setShow] = useState(false);
//handlemodal logic
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const onLoginFormSubmit = (e) => {
e.preventDefault();
handleClose();
};
return (
<div>
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
width: "20%",
}}
/>
</div>
<div
style={{
position: "relative",
alignItems: "center",
justifyContent: "center",
left: "-12%",
}}
>
<Button
variant="info"
class="text-center"
onClick={handleShow}
style={{ marginBottom: "1em" }}
>
Contact US
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
);
}
CSS:
.content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
I am developing a page where I am having one logo and one slogan. I need to place the logo first below that I need to place one horizontal Line and after that I need to place the slogan and below that I need to place another horizontal line. After that I need to place one button which will open the modal. At the bottom of the screen I need to keep one paragraph tag. I have brought all the above things. But the issue is when I am checking with various devices all of the styles are getting collapsed, I have tried using separate divs Rows and Columns but all results the same. Could any one help me out to sort this issue please. Thanks in advance. I have wrote the code below .
Expected Output:(Got the same output but not responsive)
LOGO
-----------------------------
SLOGAN WILL COME HERE
-----------------------------
Button
Code Starts
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
position: "absolute",
width: "40vh",
// marginTop: "1px",
}}
/>
{/* First HR */}
<div style={{ marginTop: "13em" }}>
<hr
style={{
position: "relative",
color: "#002a54",
width: "53vh",
borderColor: "#002a54",
}}
/>
</div>
{/* First HR ends */}
{/* Content Start */}
<div style={{ marginTop: "-1em" }}>
<p style={{ fontSize: "125", color: "#002a54" }}>
INTERLOCK RELATONSHIPS TO UNLOCK VALUE
</p>
</div>
{/* Content End */}
{/* Second HR */}
<div style={{ marginTop: "-2em", position: "relative" }}>
<hr
style={{
color: "#002a54",
borderColor: "#002a54",
width: "53vh",
// marginTop: "-18px",
}}
/>
</div>
{/* Second HR ends */}
{/* Button starts */}
<div>
<Button
variant="outline-secondary"
onClick={handleShow}
style={{
background: "#D3D3D3",
color: "#002a54",
border: "2px solid #002a54",
borderRadius: "3px",
padding: "4px, 10px",
}}
>
<p
style={{
fontColor: "#002a54",
fontsize: "125",
marginBottom: "0rem",
}}
>
Contact US
</p>
</Button>
{/* Button Ends */}
</div>
<p
style={{
position: "relative",
top: "270px",
fontSize: "125",
color: "#002a54",
}}
>
UNDER CONSTRUCTION BUT OPEN FOR BUSINESS
</p>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
{status && renderAlert()}
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
CSS:
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
I finished the layout of the website I'm working on, and like how it looks...
But...when my friend opens it on her iPhone, it looks like this.
I can't figure out what's causing this. If I use Chrome Developer Tools and set it to a responsive mobile format, or iPhone X, it resizes properly. Can anyone help me figure out what I'm doing wrong here?
I also had a third person look at it who told me the video isn't playing. So I'm pretty lost, not sure what I'm doing wrong since I can't reproduce the issue myself.
Here is the link if anyone wants to check.
And this is the code for the header.
import React, { useState } from "react"
import styled from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
import title_image from "../../static/title.png"
const MenuIcon = //Removed
const MenuLinks = //Removed
const Header = () => {
const [nav, showNav] = useState(false)
return (
<div id='header' style={{ height: '100%', backgroundColor: 'black', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%' }} >
<img alt='logo' src={logo_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='title' style={{ position: 'relative', margin: 'auto', textAlign: 'center' }}>
<img alt='title' src={title_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='menu' style={{ width: '100%' }}>
<MenuIcon nav={nav} onClick={() => showNav(!nav)}>
<div />
<div />
<div />
</MenuIcon>
<MenuLinks nav={nav}>
<ul>
//Removed
</ul>
</MenuLinks>
</div>
</div >
)
}
export default Header
And here is the index code.
import React, { useState } from "react"
import Header from "./header"
import Footer from "./footer"
import "./style.css"
import VideoFile from "../../resources/vide_file.mp4"
const Index = () => {
const [nav, showNav] = useState(false)
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<Header style={{ alignItems: "flex-start" }}>
</Header >
<video loop autoPlay muted style={{ preload: 'auto', height: "75vh", objectFit: "cover", display: "block", margin: "0 auto", alignItems: "stretch" }}>
<source src={VideoFile} type="video/mp4" />
</video>
<Footer style={{ alignItems: "flex-end" }}>
</Footer>
</div>
)
}
export default Index
A slight tweak to the margin property on your div id='title' element fixes the issue:
margin: '0 auto'
Remember that margin: 'auto' centers elements horizontally and vertically. I believe what's happening is Chromium is properly centering the element within the direct parent container, in this case:
<div id="header" style="height:100%;background-color:black;display:grid;grid-template-columns:20% 60% 20%"></div>
Safari instead is going a level up and centering the element on the grandparent, which is the full viewport height:
<div style="display:flex;flex-direction:column"></div>
Specifying a '0' margin above and below the element forces Safari to move the logo back to the top of the parent element.
I'm trying to get rid of the elevation shadow of the navbar over the sidebar.
I'm using Material-UI's AppBar for my NavBar component.
export default function NavBar() {
return (
<div>
<AppBar position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I am using a custom sidebar component,
.sidebar {
left: 0;
top: 64px;
height: 100vh;
width: 70px;
background-color: #3f50b5;
position: fixed;
}
.sidebar::before{
display: none;
}
I don't want to lose the elevation/shadow of the entire NavBar, just the section on the left where it's over the Sidebar.
Adding this because I spent a lot of timing finding a simple answer to removing the elevation.
The simplest way to remove the shadow is by adding elevation prop to the AppBar.
<AppBar position="fixed" elevation={0}>
you could add a ::after pseudo element to your navbar to do the job. This element would have the width of your sidebar, and would be have a top property accordingly to your navbar.
Given the AppBar itself has some different breakpoints you would need to change top accordingly:
const useStyles = makeStyles((theme) => ({
root: {
"&::after": {
position: "absolute",
content: '""',
width: "70px",
height: "8px",
top: "48px",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.down("xs")]: {
top: "56px"
},
"#media (orientation: landscape)": {
top: "48px"
},
[theme.breakpoints.up("sm")]: {
top: "64px"
}
}
}
}));
export default function NavBar() {
const classes = useStyles();
return (
<div>
<AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I created a sandbox with only the navbar, and a darker shadow to enhance contrast:
I've made a sticky footer higher-level component that wraps other components inside itself:
Footer.js
//this is a higher-order component that wraps other components placing them in footer
var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
};
const Footer = React.createClass({
render: function() {
return (
<div style={style}>
{this.props.children}
</div>
);
}
});
export default Footer;
Usage:
<Footer><Button>test</Button></Footer>
But it is hiding the contents of the page:
This looks like a common problem, so I searched a bit and found this issue, where is FlexBox is recommended for the sticky footer. But at this demo the footer is at the very bottom of the page, while I need the footer to be always displayed on the page and the content being scrolled inside the above area (like in SO chat). In addition to that, there is an advice to change all the other components with custom stylesheet rules. Is it possible to achieve what I need using styling only the footer component so the code will remain modular?
Here's an idea (sandbox example link).
Include a phantom div in your footer component that represents the footer's position that other dom elements will respect (i.e. affecting page flow by not being position: 'fixed';).
var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
}
var phantom = {
display: 'block',
padding: '20px',
height: '60px',
width: '100%',
}
function Footer({ children }) {
return (
<div>
<div style={phantom} />
<div style={style}>
{ children }
</div>
</div>
)
}
export default Footer
Much easier idea (following the trend), i imported both bootstrap and reactstrap, used the bootstrap fixed bottom class and workaround with that like this.
class AppFooter extends Component{
render() {
return(
<div className="fixed-bottom">
<Navbar color="dark" dark>
<Container>
<NavbarBrand>Footer</NavbarBrand>
</Container>
</Navbar>
</div>
)
}
There is a much simpler way. I am creating a portfolio site with React, and some of my pages are not very long, so in some devices, like kindle fire hd for example, the footer would not stick to the bottom. And of course to set this up in the traditional fashion with would not work, because the would be wrapped in there. And we don't want that. So this is what I did:
In App.js:
import React, { Component } from 'react';
import {Header} from './components/Header';
import {Main} from './components/Main';
import {Footer} from './components/Footer';
class App extends Component {
render() {
return (
<div className="App Site">
<div className="Site-content">
<div className="App-header">
<Header />
</div>
<div className="main">
<Main />
</div>
</div>
<Footer />
</div>
);
}
}
export default App;
And then in _sticky-footer.css (I use POSTCSS):
:root {
--space: 1.5em 0;
--space: 2em 0;
}
.Site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.Site-content {
flex: 1 0 auto;
padding: var(--space) var(--space) 0;
width: 100%;
}
.Site-content:after {
content: '\00a0';
display: block;
margin-top: var(--space);
height: 0;
visibility: hidden;
}
The original solution for this was created by Philip Walton: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
You can fix this by adding margin-bottom: 60px; to the body of your website. With the 60px being the height of your footer.
.footer{
width: 100%;
position: fixed;
bottom: 0;
}
This should do the trick! Cheers! (:
.App will be the main component you load to your Root.
Assume that the footer is the last child of .App in the document flow
.App {
height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
I found that if you wrap your 'footer' component in a standard html
<footer>
tag, it pretty much sorts out all of the positioning for you
I wanted to share this solution that worked. I cribbed this from https://react.semantic-ui.com/modules/sticky. Scroll to the bottom of this page and inspect the text 'This is the bottom' to see where I stole it. Its a site built on react so it should work for your situation.
Here it is:
{
padding-top: 50vh;
}
Conceptually, this solution is creating negative space like jacoballenwood's phantom div to push the footer down to the bottom and stick it there. Just add it to your css style class for the footer and adjust the value to taste.
Very late answer, but someone can find this useful. You can, instead of phantom style, set Toolbar. I have build some standard layout for the components, where {children} is component from the parent component - App.js. This is example:
import React from "react";
import { Route } from "react-router-dom";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import CssBaseline from "#material-ui/core/CssBaseline";
import Toolbar from "#material-ui/core/Toolbar";
import Header from "../components/header";
import Footer from "../components/footer";
import SideBar from "../components/sidebar";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
content: {
flexGrow: 5,
padding: theme.spacing(3),
},
}));
const StandardLayout = ({ children }) => {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Route path="/" component={Header} />
</AppBar>
<SideBar />
<main className={classes.content}>
<Toolbar />
<br />
{children}
<Toolbar/>
</main>
<AppBar className={classes.appBar}>
<Route path="/" component={Footer} />
</AppBar>
</div>
);
};
export default StandardLayout;
Its rule for me
<footer style={{position:"fixed",bottom:"0"}}>
Try this html code:
/public/index.html
<html lang="en" class="h-100">
<body class="h-100">
<div id="root" class="d-flex flex-column h-100"></div>
...
/src/App.js
<main role='main' className='flex-shrink-0'>
You can follow this template:
react-bootstrap-sticky-footer/public/index.html
react-bootstrap-sticky-footer/src/App.js