I'm a Web and UX developer for Bristol Students' Union. I wear several hats - HTML, CSS & JS, user researcher and designer (Figma). My passion lies in making things look great through attention to detail and really listening to what people are asking for.
I’m currently learning...HTML, CSS & Javascript
Latest solutions
Responsive Recipe Page using CSS variables and CUBE
#cube-css#accessibilitySubmitted about 1 year agoI'm curious to know how other people solved the problem of the margins on the image. My solution feels like a work around and I'm sure there's a way to apply universal padding to the wrapper and then just remove it from the image on the mobile view but leave it in place for everything else.
Latest comments
- @ov3rst@nickfwilliams
Hi Oliver - this is looks great and is so close to being finished! I noticed two major things: 1) You don't appear to have included the background-image and 2) You don't have any backgrounds for the star review sections, so they're just kind of floating on the page. A faded background will really help them stand out more and provide a bit more structure. Otherwise, good job.
Marked as helpful - @OnSake@nickfwilliams
Hi On Sake - You're definitely on the right track by using ::before and ::after. My tip would be to concentrate just on ::before - you only need one of these to make it work. You will also need to combine :hover with ::before to get the final effect working. If you're really stumped you can take a look at my solution but I'd really recommend trying on your own before looking elsewhere. Definitely do some Googling too - you're so close!
- @NathashaR1997@nickfwilliams
Hi Nathasha! This looks great, very similar to the final design. The major thing I noticed that looked out of place is your background image. It's currently too small for larger screens - the issue here seems to be that you've applied the url to the container div, rather than the background. Try swapping it over and see what happens. All the best!
- @KerimGurbaz@nickfwilliams
Hi KerimGurbaz - nice job on getting the fonts working, the colours are mostly fine too! There are a few issues with the layout however, as it does't take-up the full screen and it isn't responsive (there's no mobile view). I'd suggest going back and starting again with a single container div with two sib-divs in it (one for the image, the other for the text). Once you get the mobile layout done, then I'd suggest looking up 'media queries' so your code and layout can adapt to a different screen size.
- @sunkulpradeep@nickfwilliams
Hi Pradeep - just taken a look at your preview and whilst you've done a good job on matching up the colours and fonts, the overall structure of your HTML needs some tweaking. Currently, if you resize the window, then there are several elements that misalign. I'd start by using a single container div (apply flex to this container) and then divide that into two sub-divs - one for the image, the other for the text and button. Try that and see how you get on!
Marked as helpful - @Anette23@nickfwilliams
Hi Anette - this looks spot on to me! Both mobile and desktop layouts look good. Your solution is a little bit narrower on desktop but I honestly wouldn't worry about that, it's close enough to be sure. The onlt thing I noticed that would be worth tweaking is the colour on the 'per month'. It's seems darker than it should do currently which makes it really hard to read against the green.
Marked as helpful