[Support request] Mobile Formatting Issue

[Maria]

I’m having a ton of trouble trying to get this page to format correctly: http://testing.hillcounselingandconsulting.com/about/meet-our-therapists/

When I don’t put the content in a container I am unable to control the margin/padding.
When I put it in a container and set it as “full width” it has 0 margin on the left side and the content is too wide, I do not want it to span full width.
When I try to put it in a container with limited width it wants to center the content, I do not want this. I want the content left aligned.
When I set it as it is now, in two containers so that it is left aligned with a left margin, it looks how I want on Desktop but not on mobile.
On mobile the Heading (Therapist Name) needs to be beneath the photo, rather than one long string of letters down the right side of the photo.
In desktop view I want the photo left aligned with the text on the right.

I do not know how to achieve this. Please help!!

[Elvin]

Hi there,

Not sure I fully understand how you want it to display on mobile.

To clarify: Do you want to display it like this? https://share.getcloudapp.com/WnuB14bb

If so, you can add this CSS:

.gb-headline:not(.gb-headline-text) {
    clear: both;
}

If you want the text to wrap around both the image and the therapist name, you may have to place both of then on a separate container block and add alignleft class to the container block holding them.

[Maria]

To clarify: Do you want to display it like this? https://share.getcloudapp.com/WnuB14bb

Yes, but on mobile view only.

When I use the CSS provided this also clears the wrap for the desktop view, but it gave me what I needed to add my @media breakpoint.

Thank you!

[Elvin]

Nice one. Glad you got it sorted. 🙂

[Author]

Posts