[Rue NelModerator]

Hello There,

Please update your code and use this instead:

@media(min-width: 1024px){
  .page-id-61 .x-section a {
    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding: 66.66% 0 0 0;
    overflow: hidden;
  }

  .page-id-61 .x-section a img {
    position: absolute;
    display: block;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

Please let us know if this works out for you.

[juppsanParticipant]

If you have a solution to my problem I would be forever grateful :)))

The problem is as mentioned above- for iPad/mobile view all images are showing up 2:3 dimensions, and I would like to overwrite that with media queries, but I can’t figure out how to overwrite the code:

.page-id-61 .x-section a
{
display: block;
width: 100%;
position: relative;
height: 0;
padding: 66.66% 0 0 0;
overflow: hidden;
}

.page-id-61 .x-section a img
{
position: absolute;
display: block;
max-width: 100%;
/* max-height: 100%; */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

THANK YOU! (Last one I promise ;))

[juppsanParticipant]

Sorry I did’t see your answer on the next page! Thank you so much!

[Paul RModerator]

You’re welcome! 🙂

[juppsanParticipant]

Hi there!

Thank you for your amazing help&support! I am very happy with the result but I still have some small problems.. The spreadsheets looks great, but it would look even better if the images wouldn’t be centered. Now you see the persons torso in stead of heads on the portrait images:) I noticed that the problem occurs only on Safari and not Firefox.

Could you help me with this..?

Thank you so much!

[ChristianModerator]

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts