Correct way to make a custom block theme responsive


I am trying to make a custom responsive theme using the new Block / FSE approach however I dont think the method Im using is correct.

This is the current design:

Wordpress Custom Theme Site Top

This is the view in block editor:

Site Top in Editor

In order for this site to be mobile first / responsive the cover image and site logo need to dynamically resize based on viewport size

So far my approach has been to use additional CSS and create a class to apply height: auto and width: 35vw

Additional CSS

However the issue I see with this approach is that within the block editor there are controls for image width with use non-responsive units of px

Image width control

Of course the additional CSS overrides this but that seems to defeat the point of the block editor

andowt 2 months 2022-09-29T04:26:57-05:00 0 Answers 0 views 0

Leave an answer