How to reduce featured image size?

  • Resolved apexbee

    (@apexbee)


    2 years, 5 months ago

    Hi, I was able to reduce the featured image size by editing the Site Template for the Front page in the beta editor. I changed both the block height/width to 50%, which looks great on desktop. However, it also reduces the image size on mobile view and it’s too small. Is there a better way to make the featured image smaller without impacting the mobile view so drastically?

    Using WP 6.0 with Twenty Twenty Two theme.

    Thank you.

    • This topic was modified 2 years, 5 months ago by apexbee.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @apexbee

    It seems that the width setting of the site editor cannot be set responsive at the moment.

    So you need to add a responsive style

    1 site editor/ featured image block
    2 advanced / Additional CSS Class. add my-responsive-fearured-image and save
    3 customize / Additional CSS add below

    
@media (max-width: 600px){
	.my-responsive-fearured-image:not(#hardspecificity){
		width:100%!important;
	}
}

    If the browser width is 600px or less, it will be displayed at 100%.

    note: : not (#hardspecificity) and! important is required to override the style attribute.

    Thanks

    • This reply was modified 2 years, 4 months ago by nobita.
    Thread Starter apexbee

    (@apexbee)

    Thank you @nobita! This fixed it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to reduce featured image size?’ is closed to new replies.