Recipe page with mobile layout

Community feedback

• 

  uzainmalik123•260

  @uzainmalik123Posted about 2 months ago

  i mean you could just split it into two containers the image and the content use flex-direction column and set the image container width and height and just put the image as a background don't use a image tag.

  0
• 

  P

  Caitlin Donahue•120

  @DonahuecPosted about 2 months ago

  I didn't look into the whole solution, because I am tired and just saw this in passing. But I thought I would pop in and give you a hint for the image: you can give the image a negative margin equal to the container padding on small screens, which allows it to expand outside of it's container :)

  0

  ---

  

  uzainmalik123•260

  @uzainmalik123Posted about 2 months ago

  @Donahuec negative margin you know that would be bad practice that would dodging the problem instead of solving it.

  0

  

  P

  Caitlin Donahue•120

  @DonahuecPosted about 2 months ago

  @uzainmalik123 Negative margins aren't bad practice, they are a fully supported part of the css spec, and an industry standard way of solving the problem of needing to break an element out of the limitations of it's parent's box model. This isn't some hacky solution, it is the most common way of solving this problem, and I've even seen it taught in css courses.

  In this case, semantically, you want the image contained within the card, and logically you want the padding applied to the whole card, as applying it to individual elements is more prone to bugs. you specifically want a single element to visually expand past the container on smaller screens. Frequently you will be limited in your html structure or semantic html, and will need to find ways to visually 'break out' of it while leaving the page structure the same, this is one of those ways.

  As you learn more, you will find that frequently standard css solutions feel hacky or like tricks. and that is because they are. The history of web design has been entirely about bending the limitations of the web document model to our designs, and finding the simplest or most efficient way to do that. At least we don't really need to deal with floats and clearfix solutions anymore, because those were peak hacky :P

  Marked as helpful

  1

  

  Arthur•100

  @arthur-scheveyPosted about 2 months ago

  @Donahuec Thanks for the help! I was also worried about the negative margin thing since it felt dubious. I appreciate the info though so it looks like it's just another thing to add to my tool belt as I learn.

  0

  

  uzainmalik123•260

  @uzainmalik123Posted about 2 months ago

  @Donahuec ok that might be a way you can use but there are so much better ways than adding negative margin or anything but I am saying a person that does not know what they are doing they might get stuck so finding better ways like a easy simple way is just to split the containers into two parts negative margin is just dodging the problem and you know if anyone build more projects and they have used negative margin before they will do it again instead of finding a better way because negative margin is so easy to apply just one line of code.

  But you do you I don't think its a good way but if you do think just keep at it and use negative margin, padding and anything.

  0