Images skewed using code from B&B template

[angelahoskins]

Hi there,
I have based some CTA images on the B&B template using the following code in a text block. The issues are:

1. On a mobile device the images are very skewed.

2. I would also prefer them to display full screen width on a mobile device.

Can you please advise how to fix this? Website: https://dev.memyhair.com
Many thanks in advance.
Angela

Shampoos, conditioners For every hair type

Treat, nourish, protect Exquisite products!

[tristup]

Hi Angela,

Thanks for reaching out.
It seems that the custom CSS code is the reason behind your issue. The Minimum height is set to the Anchor tag which makes the Image stretched in the smaller screens. I would suggest you remove or adjust the min-height for the smaller screens.

Hope it helps.
Thanks

[angelahoskins]

Thanks for responding so quickly.
I’ve made this change to min-height to the height of the image, 304px, but it hasn’t fixed it. My images were created using same dimension ratio to template.

Re. #2 in my first message, in Cornerstone I have tried to change the section margins and padding so that content displays almost full width, but without any effect or success.

I’ve also watched the video on https://theme.co/docs/responsive-styling but the button example doesn’t give a good indication of how I can implement the change, for my issue context, to make content wider on a smaller screen.

Do I need to change to template?I have used the B&B template which is proving to be a mistake. Padding/margins are too generous on small screens which limits how the content displays. Can you please tell me how to customize the section margins (I have tried in Cornerstone but without success) or do I need to set a different template?

I am also hoping that with minimizing the margins the skewed image issue might be fixed.

Thanks again,

[tristup]

Hi Angela,

You need to decrease the min-height value for the smaller screen to get rid of the issue you are having with the image. Regarding the other point, can you please specify the section where you are having this issue, so we can check and find the reason behind it?
We may need to investigate it through your Admin Dashboard, I would request you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific Page URL where you have added the button
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[angelahoskins]

Hi again,
And thank you for your help. I will send my login details.
It’s the homepage section 2 that I need help with. I would like the images (set within a text field) to be the same width as the black background of Section 3.

So images 1, 3 and 5, as they display, to be aligned to the left, same as the left margin on Section 3 black background.

Images 2, 4, 6 as they display, to be aligned to the right, same as the right margin on Section 3 black background.

Cheers.

[prakash_s]

Hello Angela,

It seems that you have set the padding for the section and max-width of the Row that is it the image section is not containing the full width as per section3.

1. Go to the section and set the padding as 0. Please have a look at the given screenshot below.

2. Go the Row —>Size—>Max-width set the max-width as 100%.

Hope it helps
Thanks

[angelahoskins]

Hi there,

Thank you very much. This has been really helpful and much appreciated as I now have my issue sorted.

Cheers!
Angela

[friech]

We are delighted to assist you with this.

Cheers!