Team section on portrait view not as i want to see

Illdy
1

I have some issues trying to fix with Illdy theme 2.0.0 and Illdy Companion 1.0.7
This one is getting the prioriteit any idea how can I solve this in additional css?
8. Team section > person widget
On eralier theme and companion version, person image was not disturbing the layout on small devices. Now its not coming on top of person detail text, but it forms like 2 colomn setup, and first colomn is foto, second is text. on smart phone this is looking very ugly.
How can i make in responsive way if portrait view active, photos of persons comes on top, then the descripton text under folows?
the screenshots are added to may this question more clear.

2

to make sure, the way it is on desktop is very nice. Only om small screens I need an additional change I think. Is that possible?

3

Hi,

Can you show the website address to check the issue?

Let us know,

Thanks,
laranz.

4

http://helpghana.info.greenhostpreview.nl/

the name Bilge Muhurdaroglu is also breaking in few lines because of this issue if screen with is narrower.
please check it on mobile device portrait stand. (android) I didn’t check it on iPhone yet.

thanks

5

Hi,

Can you try this Custom CSS? Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

@media only screen 
  and (max-width: 480px) {
    #team .section-content .person .person-content { width: 100% !important; }
}

Let us know,

Thanks,
laranz.

6

WoW! it did the trick laranz. I appreciate your help. :slight_smile:
thank you

B

7

Hi,

Glad we helped. :slight_smile:

Let us know if you have any other questions. If you’re happy with our service, don’t forget to review & rate us in WordPress [Illdy] Reviews | WordPress.org. :wink:

Thanks,
laranz.

8

Hey Iaranz,

I was having the same problem earlier and tried your solution above - it worked!! The only thing is now I want to center the image (it’s still offset to the left).
I tried:

@media only screen 
  and (max-width: 550px) {
    #team .section-content .person .person-image img { width: 100% !important; }
}

But it’s not listening to me. Also, it shows up correctly (image is centered) in the preview from the dashboard but not on my actual phone. I attached a sreenshots below (one in the preview + one of my actual phone). Website is at https://swiftlydigital.com

Hope we can figure this out!