Increase Height of Featured Image on Small Screen

Tagged: featured slider

This topic has 4 replies, 2 voices, and was last updated 6 years, 11 months ago by tikaram.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 18, 2017 at 2:44 am #128180

Gareth
Participant

Hi,

I would like the height of images on the top featured slider on small screens (phones etc) to display with a larger height – i cant find the css which controls this. Could you give me some help or point me in the right direction? im assuming it works on a % or the like but not sure which div or css im looking for.

Thank you!
Gareth

December 18, 2017 at 2:49 am #128181

Gareth
Participant

just to be clear – i want the featured image slider, displayed on my homepage, to show a larger image – please check – https://hokkaidoguide.com/

on the phone the top image – on the slider, which comes from the featured image, is a little to small in height. i want to increase this height so it is similar to the other photos on the site in size.

thank you!

December 18, 2017 at 6:02 am #128199
tikaram
Participant
@rawikltd : Go to Appearance => Customize => Additional css and add the following css.
```
@media screen and (max-width: 767px){
	#main-slider img {
		height: 300px;
	}
}
```
Note: The image may get elongated due to height restriction. Let me know if you need any further assistance.

Regards,
Tikaram
December 18, 2017 at 10:48 pm #128231

Gareth
Participant

Thats the one!
Thank you good sir!

Yes i see some of the images become elongated looking a little — any way to avoid this?
ive set the height at 240px.

cheers
gareth

December 19, 2017 at 5:07 am #128246

tikaram
Participant

@rawikltd : Glad to know that the issue has been resolved. Have a Good day.

Regards,
Tikaram
Author

Posts