Ive started developing a FSE theme and I would like to make a responsive site.
Traditionally I would have done this with bootstrap and used CSS sizing on images
My first goal was to create a hero cover with a rounded site logo in the center. The site logo should then dynamically resize depending on the viewing device
The issue I have come across is that all the image block widths (image, site-logo) etc are specified in px
The only mention of responsive units I can find in the developer docs are in theme.json adding “units”: \[ “px”, “em”, “rem”, “vh”, “vw” \] in spacing settings. Doing so however does not seem to make a difference (image widths still in px)
​
In addition when resizing images above a certain point (Id guess the actual image size) the selection box increases but the image does not (as seen in attached images)
One approach I have taken is to add custom CSS to the image blocks and set something like width: 40vh; height: auto however doing that seems to defeat the point of the editor
Interested to hear any thoughts on how I can get responsive images into a FSE theme – or perhaps the answer is to go back to developing classic themes?
[ad_2]