Images not aligned to center on mobile

Hey DROR,

Please add a custom CSS class name “my_centered_image” to the images you like to center and add the below CSS :)

.my_centered_image  {
	right:50%;
	transform:translateX(50%);
}

Best regards,
Vinay

Hi,

I assure you there is nothing wrong with the theme. The existing custom CSS added to the child theme is conflicting with the alignment of the images. To find out which code it is you can right-click and inspect and remove the block of code which is affecting the image alignment.

Best regards,
Vinay

• This reply was modified 6 years, 7 months ago by Vinay.

Hi,

Removing the below code from the child theme should fix the alignment issue

@media only screen and (max-width: 449px) {
        .avia-image-container.avia-align-center .avia-image-container-inner {
            width: 123.4% !important;
            max-width: 130%;
            left: 11.6%;
        }
}

Best regards,
Vinay

Hi bakbek,

Try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  #top .av-masonry-entry.av-masonry-entry {
    left: 0 !important;
  }
}

Hope it helps :)

Best regards,
Nikko

Hi,

Glad we could help. Let us know if you need further assistance :)

Best regards,
Nikko