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

  • Thread starter Thread starter Darkmisc
  • Start date Start date
  • Tags Tags
    Css
AI Thread Summary
The discussion centers on issues with a mobile responsive webpage that experiences layout problems when the screen width drops below 347px. The outer and inner containers shrink unexpectedly, causing misalignment and loss of center alignment for components like the hero section and "Our Services." Despite attempts to adjust the width, margin, and padding settings, the problem persists. The user notes that while the text, buttons, and images remain unaffected, the containers do not respond as intended.Several solutions were explored, including hardcoding widths for smaller screens and using media queries, but these approaches either compromised responsiveness or did not resolve the shrinking issue. The conversation also touches on the differences between CSS grid layouts and Java's grid bag layout, with suggestions to isolate components to identify the cause of the issue. Ultimately, the user found success by adjusting the parent container's width and ensuring proper media query syntax, highlighting the importance of correctly applying CSS properties for responsive design.
Darkmisc
Messages
222
Reaction score
31
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.


shrink.gif


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
 
Last edited:
Technology news on Phys.org
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
 
Last edited:
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.
 
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.
 
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:
 
  • Informative
  • Like
Likes berkeman, Darkmisc, DaveC426913 and 1 other person
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
 
  • Like
Likes jack action and jedishrfu
Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
I have a quick questions. I am going through a book on C programming on my own. Afterwards, I plan to go through something call data structures and algorithms on my own also in C. I also need to learn C++, Matlab and for personal interest Haskell. For the two topic of data structures and algorithms, I understand there are standard ones across all programming languages. After learning it through C, what would be the biggest issue when trying to implement the same data...

Similar threads

Replies
5
Views
2K
Replies
1
Views
2K
Replies
3
Views
2K
Replies
9
Views
4K
Replies
3
Views
3K
Back
Top