Advice On Making A Page More Mobile Friendly

[Ee6Kb6vHS4bY]

Hello!

I’m a first time user/novice of Wordpress and X theme and I would love to get your advice on how to make one of my webpages financialflock.com/directory more mobile-friendly.

when viewed on a computer, the webpage does a good job of showing the members via the card elements with some additional information about each member on the back of the cards. On mobile, however, the large size of the cards makes it become extremely narrow, causing the page to look unpolished.

How would you go about solving this issue? I could make the cards smaller, but then the text on the back of the cards extends past the card dimensions… Would you recommend I use a completely different element that is more mobile-friendly to showcase the members on the page?

Thank you in advance for your help!
Jason

[friech]

Hi Jason,

Thank you for writing in, yes the card element is great on desktop, but it’s not ideal for mobile especially the excerpt on your team members is too long for card element. I advise using a simple image, headline, and text element for the mobile view.

You can hide the card’s ROW by utilizing the Hide During Breakpoints feature, and switch it with a simpler element on mobile.

Hope it helps,
Cheers!

[Ee6Kb6vHS4bY]

Hi Friech,

Thank you for your help - I have made some changes now that make it much more mobile friendly!

There is one issue I came across that I would love your help on: on my test link (https://financialflock.com/testdirect/), the photo next to “Natalie” cannot fill its space due to its small resolution. Is there a way to stretch the image to fill up the area (I used “cover” on the card element to do so there)?

Thank you again,
Jason

[ruenel]

Hello Jason,

I have checked the page and I found out that you image is only 372x371 pixels. To make this fill up the whole column area, you will need to modify the minimum width of the image. Click the image element and find the “Customize” tab.

You can insert a custom CSS setting a minimum width of the image since there is no option in the element settings. You will have to insert this:

$el img {
  min-width: 100%;
}

This code given serves as an example to get you started with what you have in mind.

To know more about the CSS minimum width property, kindly check this out:

• https://www.w3schools.com/cssref/pr_dim_min-width.asp

Be advised that this custom CSS needs to be maintain by you whenever there are theme updates to check whether it still apply to your page or not.

Kindly let us know how it goes.

[Ee6Kb6vHS4bY]

Hi Ruenel,

The custom CSS you provided did help with increasing the size of the photo to make it match the other photos on my computer. However, now the photo with the custom CSS on mobile appears much larger than the other pictures. Is there a way to solve this?

Thank you,
Jason

[Ee6Kb6vHS4bY]

Nevermind, I fixed it! For other people who come across this post, I simply edited the photo by expanding it using Paint 3D on PC

[marc_a]

Hi Jason,

We are glad that you we’re able to fix your issue.

Thank you.