[Resolved] grid item width on mobile

[Author]

Posts

[emilyr]

hi—
just had someone from support help me sort out an issue with my bootstrap grid but now im noticing that some of my grid items are not 100% wide on mobile (see image). these are grid items that do not have images.

any idea how i can get these items to all be the same width?

issue is here: hidden link
site password: beets

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I see there is issue with your HTML structure.

If I add CSS width: 100%; to div elements which missing the image its displaying fine
OR
try to set min-width:250px for your CSS class "people-grid-container" .

[emilyr]

hi minesh– thanks for taking a look.

i just popped in the code you suggested, though im still seeing inconsistent widths on landscape mobile (see image). how can this be corrected so that all items are the same width?

[Minesh]

Well - could you please confirm that you've added proper class to your HTML to display it with all devide.

Please check following tutorials for - More info:
=> hidden link
=> hidden link
=> hidden link
=> hidden link
[Section: "Mixed: Mobile, Tablet And Desktop"]

[emilyr]

hi minesh– im not following whatever you are suggesting is not working. as you can see in the image, the code you recommended is in fact displaying, however the grid items are all still at different widths. i have no idea what you are pointing me to in all of the links you sent over. can you be more specific?

thanks

[Minesh]

Ok - let me dive into your live site and check what needs to be fix in order to resolve this issue.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I see there is custom CSS added for media queries and that affects the view.

I see that its coming from Dynamic custom CSS.
=> hidden link

Following style added to your dynamic custom CSS section under media query section:

@media only screen and (max-width: 768px) {:

/* grid styling */
.people-grid-container {
    min-width: 250px!important;
}

Could you please try to change above CSS to following:

/* grid styling */
.people-grid-container {
    min-width: 300px!important;
}

[emilyr]

hi minesh–
this code is working in some, but not all, instances. it looks like i need to make adjustments for different screen sizes through a few different media queries. it seems like a lot of extra code for what seems like should be an automatic resizing.

are multiple media queries really the only way to have this container go full width on smaller screens?

[Luo Yang]

Dear Emily,

Minesh isn't available currently, you will get answer when he is back. I suggest you provide the details for the question:
this code is working in some, but not all
Point out the problem page URLs, how and where we can see the problem. Thanks

[Minesh]

are multiple media queries really the only way to have this container go full width on smaller screens?
==> Well, in your case yes as those media queries are not added by Toolset, its your custom media queries, so you need to adjust it as per your need.