I’m building my first Elements website to replace a Classic RapidWeaver site. It’s not taken me too long to get stuck.
How do I change the size of an object and/or margins/padding based on the responsive breakpoints? For example, if I wish to link the size of an image to a responsive width?
Thank you.
Elements is built around the Mobile first approach.
You can override the Mobile sizing, by selecting the screen size above and then small dots appear in the component next to the sizing. Click the dot to turn it blue and then adjust the sizing the way you want. You can do this for all the screen sizes.
The manual also has lots of information and videos on this stuff. You can learn about Responsive Breakpoints here. And here’s the video from the page…
Ahhh - thank you. I knew I was probably missing something very simple!
I made the mistake of designing my site for a large screen. I’m finding that making changes for mobile size is a real pain. Yes, I can override my settings as I go up in size, but I find that I’m making so many changes, and separate pages need to be edited as well. I’m thinking it will be easier to rebuild it from scratch.
I did the exact same thing but actually found it really useful to go and get mobile looking good with the content I already had and then play around with the breakpoints. I ended up using the ‘hidden’ function quite a lot to display totally different things depending on screen size.
