I'm developing a a base site app for a multi-function site. So in this moment I'm developing only the responsive frame where the app will go. I want the page to have a header and 3 columns (2 lateral columns for ads and a middle column for the application).
I want the lateral columns to appear only in resolutions above 850px.
So I have the following code:
App.js:
<...imports, etc ...>
function App() {
return (
<Router>
<Navbar />
<div className='divAds'>
<VerticalAd />
<div className='divMiddle' >
<HorizontalAd />
<div className="App" >
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/about" component={About} />
<Redirect to="/" />
</Switch>
</div>
</div>
<VerticalAd />
</div>
</Router>
)
}
and in VerticalAd component I have:
import React from 'react'
import VerticalSun from '../../img/sun-vert.jpg';
import { Image } from 'semantic-ui-react'
import './verticalAd.scss'
export const VerticalAd = () => (
<div className='divVad'>
<Image src={VerticalSun} rounded alt="Vertical Ad" />
<Image src={VerticalSun} rounded alt="Vertical Ad" />
<Image src={VerticalSun} rounded alt="Vertical Ad" />
</div>
which created this page structure:
So I want the lateral columns to disapear in mobile screens so I had the following css to VerticalAd.scss:
.divVad {
#media (min-width: 850px) {
display: block;
}
#media (max-width: 849px) {
display: none;
}
img {
width: 10em;
height: 50em;
}
}
But the vertical columns won't disapear in lower resolutions. What am I doing wrong ?
I tried to move #media queries to App.scss but didn't work also.
I'm testing this using Chrome developer tools's responsive test.
Edit
The problem was developer tools. ASAI tested it by sizing the whole browser window it worked. Sorry.
But anyway... #Samathingamajig answer's was useful and I have accept it. Sorry any inconvenience.
You're writing the media queries the wrong way around; media queries go outside, selectors go inside:
.divVad {
img {
width: 10em;
height: 50em;
}
}
#media (min-width: 850px) {
.divVad {
display: block;
}
}
#media (max-width: 849px) {
.divVad {
display: none;
}
}
Related
I have attempted to let 'react-pdf' to change its size by using media query.
I do understand that:
// when I put mouse cursor on <Document>, it displays:
(alias) class Document import Document
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
</Document>
</div>
is how to adjust the scale in general.
But with media query on css,
#media only screen and (max-width: 600px) {
.home-text {
width: 400px;
}
.pdf {
width: 400px;
}
}
Despite reading the document, I can't get an idea.
https://react-pdf.org/styling#media-queries
The size of pdf displayed on the page does not take effect.
With this error message:
"Compiled with problems:X
ERROR in ./src/pages/Home/Home.js 12:15-32
export 'StyleSheet' (imported as 'StyleSheet') was not found in 'react-pdf/dist/esm/entry.webpack5' (possible exports: Document, Outline, Page, pdfjs)"
I feel like I lost the way. What should I do to change the size of this react-pdf outcome other than the hook? Or is there a way I can do?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import { StyleSheet } from "#react-pdf/render";
import HomePDF from "../../pdf/resume.pdf";
const styles = StyleSheet.create({
section: {
width: 200,
"#media max-width: 400": {
width: 300,
},
"#media orientation: landscape": {
width: 400,
},
},
});
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
{/* <Page scale={1.5} pageNumber={1} /> */}
<Page size="A4" style={styles.page} />
</Document>
</div>
</div>
<hr />
</div>
</div>
</>
);
}
export default Home;
I try to make the Gallery.js script appear above the header. I can only make it display next to it, because by default the script takes the whole height. How can I change it?
<div className="App">
<Gallery images={this.state.IMAGES} />
<header className="App-header">
<Link to="/success">
<button variant="outlined">
back
</button>
</Link>
</header>
</div>
.App-header {
min-height: 100vh;
}
.App-header has as min height the full heigth
So I was building my portfolio using React.js and I'm stuck on removing the scrollbar. I've tried overflow: hidden for the parent and overflow: scroll for the child div respectively but its not working and I've tried Fullpage.js that to doesn't work for me.
I want to completely remove the scrollbar from the whole website. Could you please help me? This is my App.js
~ This is a reference site: http://kuon.space/
import React, { useState } from "react";
import "./App.scss";
import Home from "../home/Home";
import About from "../about/About";
import Skill from "../skill/Skill";
import Project from "../project/Project";
import Contact from "../contact/Contact";
import ThemeContext from "../../common/ThemeContext";
function App() {
const [theme, setState] = useState('darks')
const themeStyle = {
dark:{
background: '#121212',
primary: '#DADADA',
secondary: "#A13251"
},
light:{
background: '#E1E1E1',
primary: '#333333',
secondary: '#008F96'
}
}
return (
<ThemeContext.Provider value={
theme==='light'?
themeStyle.light:
themeStyle.dark
}>
<Home />
<About />
<Skill />
<Project />
<Contact />
</ThemeContext.Provider>
);
}
export default App;
You can hide the scrollbars with css. But doesn't work with mobile browsers.
.hide-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}
Another solution is
.element::-webkit-scrollbar {
width: 0 !important
}
This worked for me.
html{
overflow:hidden;
}
I have used a contentEditable div inside a webview for some editor functionality in one of my app. The html code seams to work fine and responding to keyboard show and hide action in my android chrome browser but when i tried the same html code with the webview in react-native it won't responds to the keyboard and content hide behind the keyboard.
I have tried scrolling it to the end of the div and auto increase it's height according to content but nothing works.
import React, { Component } from 'react';
import { View, WebView } from 'react-native';
class webviewEditor extends Component{
render() {
return (
<View style={{flex:1}}>
<WebView
source={{
html: `
< head >
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#editor {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="editor" contenteditable="true">
</div>
</div></body>
`}}
ref={web => { this.webview = web }}
style={{ flex: 1 }}
scalesPageToFit={false}
scrollEnabled={false}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
/>
</View>
);
}
}
I expect the result to be the webview will scroll to the above of the keyboard just like in the browser but it won't in the app inside webview.
I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>
One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.