I’m a bit of a coffee geek, experimenting with a new blend this morning and it’s lovely! Grinding your own beans at home is the best way
So I’ll go through what I would do to, in my opinion, make your site look better. Naturally, this is entirely my own opinion, and so others may reply with their own preferred and equally valid methods I always learn lots by seeing what other people do! So feel free to pick and choose any of my methods below.
First of all,
I would start by including a Wrapper div. Just an ordinary div, which I set to Max Width 1440px width, flexed vertically with the child elements centred. I would then put your
New Slider home and
Flex parent 5 elements in this. Finally, in the
body wrapper's spacing settings, I would hit the “Centre Element Horizontally” option, and apply padding of 10 px to the
body wrapper (completely optional, I like to have a gap between the edge of the screen and the site content on smaller breakpoints but feel free to not apply this padding if you prefer). The below screenshots show the result of all of this this:
So now we have all of our content centred in the page. I also don’t tend to style the
Body, so I have removed all of the spacing and size settings that you applied to
Next, I would remove all of the spacing settings that you have applied to
New Slider home,
Flex parent 5, and each of the
Mask and all
Slides just so we are starting with a blank canvas. I then applied a height of 700px to
New Slider home. This is the result:
I noticed that you have
Navbar thin in each of the slider masks? Why not just have a single instance of this at the very top of your page structure? Below are screenshots of how I would style the navbar (I don’t like
Container, so I have replaced it with a standard
Div. Others may disagree though!). By replacing the
Container with a
Div, there is no longer anything with a fixed width on your page and so when your breakpoint reduces in size, everything flexes nicely. Here is the result, with screenshots of each of the Navbar elements and their settings… I also placed the
Navbar thin into a
section which I have styled appropriately:
As a final touch, In each of the
Slides, go into the image background settings and centre it. That way, when the breakpoint reduces in size, the
Slide image remains centred.
Note that you will still need to adjust settings for everything we have covered above in order to make it mobile/tablet friendly. All of the above is for Desktop only… you still have a lot of work to do for smaller screen sizes. You will need to go into each device size and adjust the settings appropriately.
It will take time to get used to this, but it will come! Just keep experimenting and playing around.
Here is a Loom video of the final product if you follow each step above:
I hope this helped. I have been told that I sometimes have abstract ways of working - however even if you only pick out one thing from this guide that you like, then it’s worth it
Feel free to reply on here or shoot me a private message if you need anything else.