Social media icons in the mobile version

Hey ijnavas,

Thank you for the inquiry.

Did you add any css modifications? It is possible that one of the modifications is causing the problem. Please provide the site URL in the private field so that we can check the issue.

Best regards,
Ismael

Hi,

Thanks for that. I can’t see a Team Member element on the page you linked to though, could you link directly to where we can see the problem please?

Best regards,
Rikard

Hi,

Thank you for the update.

We could change the team member image to a square shape instead of round on smaller screens to create more space for the social icons.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .team-img-container {
    border-radius: 0;
  }
}

Please check the screenshot in the private field.

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 989px) { 
	.team-social-inner {
		top: 25%;
	}
	.responsive.av-no-preview #top .avia-team-member .team-social {
		height: 100px;
	}
}

the expected results:

Best regards,
Mike

Hi,
Sorry I’m not sure what you mean, are you seeing the same as in my screenshot above? What part is rounded? Perhaps including a screenshot would help.

Best regards,
Mike

Hi,
Originally I didn’t see this, but today I do, I think that you have added the border radius in the team member style tab, please check and remove the numbers from the boxes:

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .avia-team-member .team-img-container {
	border-radius: 0;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike