Total newbie here coming from RW/Stacks and LOVING Blocs so far! Great job!
I make a new project/page and add a carousel. I want the images in the carousel to be 100% wide but only 325px high.
As there appears to be no way to define the height of the image in the UI, I did the following ( and I want this to work as a general concept, not just in this situation…)…
I grabbed the CSS element id for the slide image. Created a ‘custom.css’ file in the project folder and added the styling I need for the images into that custom.css. I then attached the custom.css in the ‘Header File Attachments’ in the page settings UI.
The result is that the custom CSS I need IS being applied when previewed in the browser - but not in the Blocs UI. So the images are still overflowing their containers and messing up the UI/Blocs preview.
I can see from the source html in the browser preview that the custom.css is (obviously) being applied… so the question is how to get the Blocs UI to take that custom css file into consideration in its render? The expectation here is, I suppose, that if in the page settings I have specified a CSS file in the header, then I would want that CSS file to be applied to the page both in the UI and in the resultant export/preview in browser operations. Does that seem unreasonable?
The ability to smash Bootstrap elements together quickly in Blocs but still style them the way I need in either custom classes or an external (but still UI incorporated ) stylesheet is essential to my workflow.
Question 2 (if thats not too cheeky!) - can we please, please define custom CSS classes with code too?