Support for Team Section

Illdy
1

Hi,
I only have one “team member” I want to display so I adjusted this section using this code which I found on another thread- not sure if I did the right thing as this is not my specialty. I wanted the column to fill the screen more so there was less scrolling needed to read the text.

#team .col-sm-4{
width: 80%;
}

It looks perfect on tablet and desktop but not on a phone. If you have a suggestion, I would greatly appreciate it.

Thanks in advance

2

Hey there,

I hope you are well today and thank you for your question.

When making certain changes, to width, you may need a media query to adjust the size based on screen resolution.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*team colum size on mobile*/
@media (max-width: 550px){
#team .col-sm-4{
width: 100%;
  } 
}

Best regards,
Support.

3

Thank you for taking the time to send me this code. Unfortunately, it did not fix the problem.

What about changing the text justification so that it is in-line with the other sections instead of being justified to the right? (So that it is centered)

Also moving the photo so that it would be centered above the text and not to the left of the text?

These are some changes I would like anyways if possible.

4

Hi,

I also only have one team member. When I use the code above, the div that the team member is in collapses, and the text wraps in a very narrow column (for mobile). Note: This can be seen at www.cantedview.com/wordpress.

Thanks,
Mike

5

hi Mike

To be honest i cant reproduce the problem you have, can you a clear cache of your browser and try again? i think its foxed,

6

Hi Noda,

My issue (and I presume Ange’s) can be seen when viewing our sites on iPhones 5/5s/5c/6/6s. I have confirmed this using 3 available phones that I have access to.

The issue does not take place on desktop web browsers or phones with resolutions that rival them (in other words on many Android or iPhones with larger screens), and only seems to affect mobile devices with 4" screens (with a resolution of ~750x1334). Unfortunately, that accounts for nearly half of the mobile internet population at the moment, myself included.

Note: You can see this happen on a desktop browser if you resize the window down to a similar resolution to one of these models of phones. I have attached a screenshot of doing this.

If you have access to one of the mobile devices listed above, or can observe it happening in a desktop browser when resized, can you review my site (http://www.cantedview.com/wordpress), and confirm that you are able to observe this formatting issue in order to escalate it to the support team there for a possible fix?

Thank you,
Mike

7

Hello there,

I hope you are doing well today.

I was able to replicate the issue by resizing the browser.

You can use the following CSS code to fix the issue by going to Appearance > Customize > Additional CSS and pasting it there.


/*Width solo team fix*/
@media only screen and (max-width: 760px) and (min-width: 740px) {
#team .section-content .person .person-content {
    width: 100%;
}
}

Let me know how this works.

Best Regards,
Support

8

Hi Noda,

This looks a lot better on desktop browser when smaller. It however doesn’t fix the issue for mobile or when the desktop browser is at an in-between size (like 805-or so px wide).

Any other ideas to get this to be a block no matter the width of the viewer?

Thanks!
Mike

9

You can see how this appears on an iPhone SE in the attached image.

10

Hello there,

Thanks for telling me.

We can increase the max width used for this CSS. SO you can in increase the max width to 900px. it should look like this:


/*Width solo team fix*/
@media only screen and (max-width: 900px) and (min-width: 740px) {
#team .section-content .person .person-content {
    width: 100%;
}
}

Best Regards,
Support

11

This is still taking place despite the changes to the code. Is there anyway to have a developer there duck in and review this section (team) of my site: www.mikecarnohan.com?

Thank you!
Mike

12

Hi

please add this code as well:
div#illdy_person-3 {
margin-left: 0px !important;
}

can you share a screenshot of how it looks now? still, it looks normal for me :slight_smile:

13

Hi,

While the issue is slightly better than when we first started addressing it, the team section (with only one member) still is not properly formatting on iPhones with 4" screens.

I am attaching another screenshot of the issue and am including the specialized CSS I am using for the site:

.header-navigation {
	display:none;
}
#header .bottom-header h1 {
	font-size: 65px
}
div.col-sm-12 {
	padding:0;
	padding-bottom:10px
}
div#illdy_person-3 {
	margin-left: 0px !important;
}
#team .section-header {
	margin-bottom: 45px;
}

/*team colum size on mobile*/
@media (max-width: 550px) {
#team .col-sm-4 {
	width: 100%;
}
}

/*Width solo team fix*/
@media only screen and (max-width: 900px) and (min-width: 740px) {
#team .section-content .person .person-content {
	width: 100%;
}
}
#services:before {
	background-image: none !important;
}
.service-title H5 {
	font-size: 19px;
}