Optimizing pages based on breakpoints using CSS Grids

[Tdrummer89]

Hi there,

I’m working through building the pages on my site and I’m having some complications that I’ve tried to figure out on my own but needed advice.

I’ve got various sections on this page using CSS Grids to organize content and I’m getting the hang of adjusting the items for smaller screens and various breakpoints, but this one section has me stumped.

The page is found here: https://fortressfitnessfl.com/meet-kelly/

I’m pretty satisfied with its look on a full desktop

For the above picture, how can I remove the excess space on the right in the section with the icons and text? I’m also having issues with text alignment when I shrink down to different breakpoints.

As I shrink down the size, I get this gap between the image and the text below. What’s the best way to resolve this issue within the grid? I also want to align the text differently at these breakpoints but I’m having trouble.

I’ll provide more information as needed to help resolve the issue. Thanks!

[prakash_s]

Hello Tyler,

Thanks for writing to us.

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[Tdrummer89]

I’ve attached the secure note. Let me know if you need anything else.

[prakash_s]

Hello Tyler,

I tried to access your site dashboard but the given credentials are not working. Please recheck and send us again.

Thanks

[Tdrummer89]

Hey there, I reset the password to the credentials I gave you and tested it in incognito to ensure you could get into the site and it should work now. Let me know if you have issues. Thanks!

[christian]

Hey Tyler,

You need to set a Maximum Height for the “Portrait” Cell then set the last value in the Grid’s Row Template to just 1.

You can see it working in the video in the secure note.

Hope that helps.

[Tdrummer89]

Thanks for your help! I appreciate it.

[Tdrummer89]

As I adjust the site for smaller screens, I’m feeling a bit lost on what values and settings to tweak for the following items and would request a bit of guidance on what I should be looking for here. I only have a couple to ask about at the moment:

-What settings should I be adjusting for the text in the grids and columns when I want them to have either different sizes at different breakpoints or different alignments in the cells and grids? I’m having issues with text not centering at smaller breakpoints in certain grids. I like how the content looks on the full desktop PC breakpoint but once I shrink down things get a bit cluttered and asymmetrical. Still working to adjust more as I go. Should I be making some changes with flexbox settings? Any links or advice would be appreciated.

I have certain photos I like them to be larger on desktop but prefer them to be scaled down at smaller breakpoints. There’s one photo of my client on the same page provided before that looks great on desktop at a larger size, but I’d need to scale to smaller size for tablet, phone, etc.

I appreciate your patience and help. The previous instructions have helped me better grasp the builder.

Should I consider duplicating certain sections and optimizing those at different breakpoints and hiding them based on where I need them? For example, duplicate sections and readjust to fit the various breakpoints but only have them show at certain sizes.

[ruenel]

Hello Tyler,

Please check out this video tutorial first:

• https://www.youtube.com/playlist?list=PLWPh_GoP7hYXHrOv3sYUNQ5mVeApTnkO2

The Grid Layout option in the grid element settings should be able to help you adjust the grid columns and rows in different screen sizes.

Hope this helps.