[CSS] Why do my containers shrink at screen widths <347px?

[Darkmisc]

TL;DR

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.


[CODE lang="css" title="Inner/outer container" highlight="33, 34, 35, 36, 38, 11-15,"]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%; }

`;
[/CODE]


Here's the full code for the file.
[CODE lang="css" title="home.js" highlight=""]
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>
);
}



[/CODE]

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.

[CODE lang="css" title="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;
}
`[/CODE]



Does anyone know why it's doing this?

Thanks

 

[jedishrfu]

Is there an option to use a grid bag layout? In Java, we tended to use that layout for GUI components as it resized well when windows were changed.

The grid layout always boxed components into the grid with each cell the same dimensions, and in some cases, a component refused to shrink beyond a certain point.

You could isolate the component that refuses to be resized to a smaller size.

UPDATE: Javascript/CSS/HTML doesn't have a gridbaglayout container as the grid layout can handle those features

 

[Darkmisc]

There's grid layout in CSS, but I'm not sure if that's the same as grid bag layout.

Some components behave like they should. Others don't. I'm still trying to work out the difference between them.

 

[jedishrfu]

It may be more than one component.

You can try commenting out one component at a time or components of the same type to see when it starts working.

Or comment them all out and add one at a time to see when it fails.

 

[jack action]

Why are you using a container with a grid of 1 column X 1 row? That is not a grid, it is a simple container. grid-template-columns:1fr; grid-template-rows:1fr;

And then you specify that the grid items must span from column 1 to column 2, and from row 1 to row 2, but there are no column 2 nor row 2. grid-column: 1/2; grid-row: 1/2;

Plus, you are mixing grid container attributes with grid item attributes in both the container and items.

If you want to achieve what I think you want to achieve, you should be able to do that by using display: flex; and fixing the width of your flex items.

These are my goto reference guides for flex and grid displays:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://css-tricks.com/snippets/css/complete-guide-grid/

 

[Darkmisc]

Fixed it.

I put everything in this
[CODE title="Parent"]const Parent = styled.div`

width:100vw;

@media screen and (max-width: 347px) {
display: grid;
width:100%;
`;
[/CODE]

I'd also forgotten the "px" in my media queries for the inner and outer containers :s