Hi all,
I’m new to rapid weaver elements and I’m not an expert web designer, so I might ask things that are not possible (at least not as I intend them to work)
I have few problem:
I’m using the Menu component to have a Hambuger when the size of the screen is too small for an horizontal top pages menu, but:
I can’t get the (hamburger) mobile trigger to be bigger than it is, nor I can make it appear in the center of the page instead that on one of its sides.
The list of pages when I click on the mobile trigger is always aligned left (I find no options to center it or align it right).
When the size of the screen increases, I want the menu to show Horizontaly and the Hamburger to disappear, but I also need to change the color of the names of the pages: I’ve tried overriding that option in the “Font & Text styles” section of the Menu component (clicking the small circle BEFORE making the change), but rapid weaver seems to keep the last change made of all the screen dimensions, no matter If there’s an override selection for the bigger screen sizes. (the override works for having an extended horizontal menu, though).
Thank you Paul. I’m working on it even if some changes are tricky: sometime it’s not just a matter of sizing up or down things, but also about repositioning items for a better look…this is the part that is tricky, to me: the only workaround I find is to make things visibile/invisible as the size changes, but that will tun out in having to update things twice every time I want to update the site.
Start with mobile. Tailwind, which Elements is based upon, uses a mobile first design methadology. You will have a lot fewer headaches designing this way.
Can I make the suggestion the you look at the Flex / Grid videos and if you still don’t get it then look at further videos on YouTube on the subject.
Once you get your head around how powerful the Flex / Grid setup is you will be able to create any layout you want and make it responsive, but the key is in Flex / Grid.
Agree with @simong: the flex/grid bits are the key to laying things out. Two things I’d suggest about that:
Learn how you can change the layout at different screen sizes with those two things. For instance, on a site I’m working on now, I’m using two columns on the desktop, one on the mobile devices. This is all controlled by overriding flex/grid settings at each screen size.
Grab some of the pre-made components (from the Templates panel), such as 2 Column left or Team Grid and just play with the flex/grid settings for them until you start to understand how they interact with the content.
I’ve watched the videos and started from scratch building from mobile first.
Used the grid/flex and that made it work for me, even if there are some minor things that have an odd look (es. The aspect ratio of a photo in an horizontal card needs to change often in the resizing process to keep the same exact height of the text box next to it (the box has a colored background, so if the picture is not its exact height the look becomes unpleasant).
Is there a way to “fix” the proportions of all the elements that are part of the same “block” so that it doesn’t happen something like what you can see in the screenshots?
