- #1
Darkmisc
- 215
- 28
- TL;DR Summary
- I'm making a mobile responsive page. It works fine until the screen width is <347px. After that, the container that holds everything starts to shrink and stops being centre aligned.
Hi everyone
I'm making a mobile responsive page. It's pillarboxed for wider screens, so I'm holding everything in an outer and inner container. This works fine until the screen width is < 347px.
After this, it seems like the containers shrink. The dark background for the hero section shrinks and so do all the components held in the container (e.g. Our Services). They also stop being centre aligned.
The text, buttons and image within the hero section do not seem to be affected by this. I can't seem to work out why. I thought it might be because they use a grid layout and specify the width to be grid: 1/2.
I tried doing this in the inner/outer container (with width as 1fr and auto). Neither of these options fixed the problem.
I've also set the margin and padding to 0 for screen widths <347, but that doesn't seem to work either.
I set the width to be 100%, but the issue still remains.
Here's the full code for the file.
EDIT: I tried rendering it without the containers (and no pillarboxing) and the same thing still happens.
I put everything inside <Parent> and then hardcoded the width for smaller screens at 347px. This stops the components inside from shrinking, but my page is no longer responsive.
If I set the width to 100% or 100vw in the media query of <Parent>, the components start shrinking again.
I tried the below code and it works. I could just continue with the string of media queries all the way down to 320px, but I'd prefer a more elegant solution if one exists.
Does anyone know why it's doing this?
Thanks
I'm making a mobile responsive page. It's pillarboxed for wider screens, so I'm holding everything in an outer and inner container. This works fine until the screen width is < 347px.
After this, it seems like the containers shrink. The dark background for the hero section shrinks and so do all the components held in the container (e.g. Our Services). They also stop being centre aligned.
The text, buttons and image within the hero section do not seem to be affected by this. I can't seem to work out why. I thought it might be because they use a grid layout and specify the width to be grid: 1/2.
I tried doing this in the inner/outer container (with width as 1fr and auto). Neither of these options fixed the problem.
I've also set the margin and padding to 0 for screen widths <347, but that doesn't seem to work either.
I set the width to be 100%, but the issue still remains.
Inner/outer container:
const OuterContainer = styled.div`
width: 100%;
position: relative;
overflow: hidden;
background: #f7f7f7;
display: flex;
justify-content: center;
@media screen and (min-width: 347) {
display:grid;
grid-template-columns:1fr;
grid-template-rows:1fr;
grid-column: 1/2;
grid-row: 1/2;
justify-content: center;
width: 100%;
max-width: 100%;
margin:0;
padding:0; }
`;
const InnerContainer = styled.div`
width: 100%;
max-width: 1300px;
background: white;
margin: 0 auto;
@media screen and (min-width: 347) {
display:grid;
grid-template-columns:1fr;
grid-template-rows:1fr;
grid-column: 1/2;
grid-row: 1/2;
justify-content: center;
margin:0;
padding:0;
width: 100%;
max-width: 100%; }
`;
Here's the full code for the file.
home.js:
import React from 'react';
import '../../App.css';
import './BodyText.css';
import styled from 'styled-components';
import FooterWithColumns from "./FooterWithColumns.js";
import BCarousel from './BCarousel.js';
import { useGlobals } from "../../Globals.js";
import BAccordion from './BAccordion.js';
import WhyChooseUs from './WhyChooseUs.js';
import LTextHeader from './LTextHeader.js';
import BServices from './BServices.js';
const Parent = styled.div`
width:100%;
@media screen and (max-width: 347px) {
width:347px;
}
`
const HeaderWrapper = styled.div`
`;
const OuterContainer = styled.div`
width: 100%;
position: relative;
overflow: hidden;
background: #f7f7f7;
display: flex;
justify-content: center;
@media screen and (min-width: 347) {
display:flex;
justify-content: center;
width: 100%;
max-width: 100%;
margin:0;
padding:0; }
`;
const InnerContainer = styled.div`
width: 100%;
max-width: 1300px;
background: white;
margin: 0 auto;
@media screen and (min-width: 347) {
display:flex;
justify-content: center;
margin:0;
padding:0;
width: 100%;
max-width: 100%; }
`;
const TestimonialsContainer = styled.div`
padding: 20px;
background-color: ${props => props.background || 'transparent'};
`;
const FAQsContainer = styled.div`
padding: 20px;
background-color: ${props => props.background || 'transparent'};
`;
const OurServicesContainer = styled.div`
padding: 20px;
padding-bottom:0;
margin: 0 auto;
margin-bottom:0;
background-color: ${props => props.background || 'transparent'};
`;
const Testimonials = ({ globalFont, background }) => (
<TestimonialsContainer background={background}>
<BCarousel/>
</TestimonialsContainer>
);
const FAQs = ({ globalFont, background }) => (
<FAQsContainer background={background}>
<BAccordion/>
</FAQsContainer>
);
const OurServices = ({ globalFont, background }) => (
<OurServicesContainer background={background}>
<BServices/>
</OurServicesContainer>
);
export default function Home() {
const { GlobalFont } = useGlobals();
const ColorA = "white";
return (
<Parent>
<HeaderWrapper style={{ marginTop: '80px' }}>
<LTextHeader />
</HeaderWrapper>
<OuterContainer>
<InnerContainer>
<OurServices background={ColorA} />
<WhyChooseUs/>
<Testimonials globalFont={GlobalFont} background={ColorA} />
<FAQs background={ColorA} />
</InnerContainer>
</OuterContainer>
<HeaderWrapper>
<FooterWithColumns />
</HeaderWrapper>
</Parent>
);
}
EDIT: I tried rendering it without the containers (and no pillarboxing) and the same thing still happens.
I put everything inside <Parent> and then hardcoded the width for smaller screens at 347px. This stops the components inside from shrinking, but my page is no longer responsive.
If I set the width to 100% or 100vw in the media query of <Parent>, the components start shrinking again.
I tried the below code and it works. I could just continue with the string of media queries all the way down to 320px, but I'd prefer a more elegant solution if one exists.
Parent:
const Parent = styled.div`
width:100%;
@media screen and (max-width: 347px) {
width:347px;
}
@media screen and (max-width: 346px) {
width:346px;
}
@media screen and (max-width: 345px) {
width:345px;
}
@media screen and (max-width: 344px) {
width:344px;
}
@media screen and (max-width: 343px) {
width:343px;
}
@media screen and (max-width: 342px) {
width:342px;
}
@media screen and (max-width: 341px) {
width:341px;
}
@media screen and (max-width: 340px) {
width:340px;
}
`
Does anyone know why it's doing this?
Thanks
Last edited: