“Our Team” Members not correctly displayed on mobile devices

[BenBen]

Hi!

I created an “Our Team” section and it works fine, but when I want to look up the members on a mobile device, the picture is in the same line as the text which makes it look badly. As the picture is the “featured image” I cannot really change the design. On a laptop it looks fine though.

Here is an example:
https://www.letsfetz.net/our-team/arthur/

Thanks for your help!

cheers Benny

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.thn_post_wrap.teamwrap img { width:44%;}
.thn_post_wrap.teamwrap p { margin-bottom:0; line-height:25px;}
}

Regards,
Chris

[BenBen]

Hey Chris, thank you so much for the quick help! It definitely looks better now, but the writing still slides under the picture.. is it possible to either keep the “profile” next to the picture or under it? A table would do the trick, but i can’t get in there because the picture is not editable.

Also the other pictures at the bottom are getting really small know…

Thanks again for your help!

Cheers
Benny

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

Regards,
Chris

[BenBen]

Hi,

here’s the screenshot:
http://imgur.com/a/JtTUSVT

As you can see, the arrangement of text and picture is a bit off. Also the picture at the bottom is very small.

[Sonnal S Sinha]

Hi,

Kindly use this one:

.thn_post_wrap.teamwrap img { margin-bottom:60px;}
.alignnone.size-full.wp-image-5423 { width:100%;}

Regards,
Chris

[BenBen]

Hi, thanks that looks way better now! Unfortunately it does not work for other team-members where there are two pictures..

http://imgur.com/gallery/wLu5FpV

Would be great if you could fix that too. In the end every member should get 2 pictures at the bottom, so this would be the norm.

[Sonnal S Sinha]

Hi,

Kindly use this CSS code:

@media screen and (max-width:479px) {
.alignnone {
    width: 100% !important;
}
}

Regards,
Chris

[BenBen]

Hey! Thanks that works out fine, but now the social media logos in the footer are suddenly weirdly sized..

http://imgur.com/gallery/MpMnE3X

[Sonnal S Sinha]

Hi,

Use this CSS:

.footercols2 img {
    width: auto !important;
}

Regards,
Chris

[BenBen]

It all works fine now, thank you so much!

[Sonnal S Sinha]

Hi Ben,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/24/

Regards,
Chris

[Author]

Posts