Kevin Powell - Community•4w ago

why does my content keeps getting smaller instead of adaptable to the device's width

here's my website on 2458px maybe the second image is on 1026px i set the break point to 1024px the other images are from tablets and going down idk why it diminishes why can't i see some tightness in the design that disrupts it i set the header nav to flex at least it should get closer to each other or the grid

    display: grid;
    grid-auto-rows: auto;
    grid-auto-columns: max-content;
    grid-template-columns: repeat(auto-fit,minmax(20rem,auto));
    align-content: start;
    width: 100%;
    gap: 1rem;

    display: grid;
    grid-auto-rows: auto;
    grid-auto-columns: max-content;
    grid-template-columns: repeat(auto-fit,minmax(20rem,auto));
    align-content: start;
    width: 100%;
    gap: 1rem;

i tried to make it responsive i mean why it doesn't work i can share the whole in a codepen or some

19 Replies

Dev_HKOP•4w ago

https://codepen.io/hzk-0210181/pen/YPKOMoW

HzK-0210181

CodePen

Untitled

...

Dev_HKOP•4w ago

here there's no images bcz i don't have codepen pro

Chris Bolson•4w ago

Your CodePen seems to be working (more or less). Note - You don't need CodePen Pro to add images. You can either link to your actual images or use placeholder images.

Dev_HKOP•4w ago

but see how it looks on smaller displays all small and unreadable idk what i have done to be hones

Chris Bolson•4w ago

I assume that you are referring to the left-hand bar and the main cards. This is how I see your CodePen (I have added some images). As far as I can tell it is working correctly, the grid adapting to the available space. You will of course need to work on the top bar and footer but I don't think that that is the issue you are referring to.

Dev_HKOP•4w ago

yeah that's how it looks on my codepen as well but wait lemme record a screenrecord

Dev_HKOP•4w ago

Chris Bolson•4w ago

OK, so if it works in the CodePen but not on your site there must be something different between the 2. From your capture it does appear to work initially but once the left-hand column is hidden it "looses" its ability to adjust the column cells. I would double check your media-query to see if you are also changing the grid-template-columns property when you get below about 1100px (I know you used rem but you get the idea)

Dev_HKOP•4w ago

i set both mobile search bar thing & the main desktop search bar (the left column you referring to ) it still generates the same output i even deleted them from the inspector here's all my media queries

@media screen and (max-width:90rem){
    .bloglist-and-search .search-and-navigation{
        width: calc(100% * 2/5);
    }
}
@media screen and (max-width:64rem){
    .bloglist-and-search .search-and-navigation{
        display: none;
    }
    .bloglist-and-search .search-and-navigation-mobile{
        display: flex;
    }
    .bloglist-and-search{
        flex-direction: column;
    }
}
@media screen and (min-width:120rem){
    body{
        width: 120rem;
        margin: 0 auto;
    }
}

@media screen and (max-width:90rem){
    .bloglist-and-search .search-and-navigation{
        width: calc(100% * 2/5);
    }
}
@media screen and (max-width:64rem){
    .bloglist-and-search .search-and-navigation{
        display: none;
    }
    .bloglist-and-search .search-and-navigation-mobile{
        display: flex;
    }
    .bloglist-and-search{
        flex-direction: column;
    }
}
@media screen and (min-width:120rem){
    body{
        width: 120rem;
        margin: 0 auto;
    }
}

nothing suspicous

Dev_HKOP•4w ago

i can even share with you the theme if you want

Dev_HKOP•4w ago

it has this structure

Dev_HKOP•4w ago

wanna hear a joke it's the inspector that's fucking me up

Dev_HKOP•4w ago

now i need a reliable tool to test my website on responsive cuz clearly it doesn't work on this inspector

clevermissfox•4w ago

Sometimes I’ve found on Wordpress that if you open the inspector and try to test the responsiveness , you have to refresh at the smaller screen size so that it loads the media query for that screen size- doesn’t always seem to have a resize event listener. Not to barge into the thread - just want to share that I’ve found this with Wordpress. Refresh at that screen size to properly test

ἔρως•4w ago

yup, wordpress only loads some styles if you refresh the is_mobile function only works in the server, and that may be used by the theme (if you didnt built it from scratch) or even internally to avoid loading some desktop-only things

Dev_HKOP•4w ago

i see, i do all the stylings in the style css but i appreciate the info

ἔρως•4w ago

you're welcome

Gaming

Programming

why does my content keeps getting smaller instead of adaptable to the device's width

Did you find this page helpful?