Skip to content
OverviewSolutions
12
Comments
4
Jeff
@W4GFO

All comments

  • Jeff•210
    @W4GFOPosted almost 2 years ago

    Hello @tony1c,

    First your desktop version looks great! Well done.

    The mobile form-factor would need a couple of different things:

    1. To be laid-out differently
    2. Would also include a different image asset.

    For the first point, this is where @media break-points help. You're using grid - which is perfect, and you might just want to have a single column instead of a 2 column grid for the mobile.

    Also, for the separate image assets, you can do this is either CSS or HTML - I prefer the HTML <picture> element for performance reasons.

    Here's a link to help to better understand the <picture> tag:

    https://www.w3schools.com/tags/tag_picture.asp

    Hope this helps.

    Marked as helpful
    1
  • Jeff•210
    @W4GFOPosted almost 2 years ago

    Hello @BryBry04,

    For media break points just one way to look at things:

    First, in the "regular" CSS, put in the initial properties. ie:

    • Color
    • Font
    • border radius
    • etc

    Now, before putting in any media break points, configure the additional CSS properties which will be specific to mobile. ie:

    • Width
    • Font-Size
    • column/row (if using flex-box)
    • grid specifics for mobile if using grid

    Next, add in your desired media break points. Example: @media only screen and (min-width:1060) {...}

    Now in the break point, just change the deltas for desktop. ie:

    • Font-size
    • widths
    • column to rows or configure the grid layout
    • etc...

    One piece of advice would be to constantly be certain you're verifying that each change you make for one form factor doesn't negatively effect the other. ie: If you make a change to your styling and hoping it only effects one form-factor, immediately check the others to be sure the styling didn't mess anything up.

    Marked as helpful
    0
  • BimboAdesoye•110
    @BimboAdesoyeSubmitted almost 2 years ago

    I couldn't find a way to make the images fit the container completely. If anyone has done this project and can please give an insight into how they solved this, it'll be appreciated.

    HTML and CSS

    2
    Jeff•210
    @W4GFOPosted almost 2 years ago

    Hello @BimboAdesoye,

    First, it's a nice solution, but the image is sitting in a frame it isn't big enough for and therefore is becoming a bit off. You use the object-fit cover, but in the desktop size is still using the mobile assets even though you're using the picture tag.

    Also, you may want to want to look at max-width and max-height to avoid letting your content extending or shrinking past a point where the image assets get skewed.

    It does look like good work, just a bit of practice. Also, in reference to @starryrobot comment - it's an excellent point. Below is the first thing I do for every project. This is from a React project, but you can just put it into your body tag. FYI - I always make the background orange right off the bat just so I can see it's covering the entire screen.

    Hope this help.

    div#root { width: 100vw; height: 100vh;

    display: flex;

    align-items: center; justify-content: center;

    background-color: orange; }

    Marked as helpful
    0
  • Jeff•210
    @W4GFOSubmitted about 2 years ago

    This project may seem over architected but I was trying to envision a larger project and how I might actually separate out the components. I would love to hear others' thoughts on this.

    I did have some issues configuring font for multiple paragraphs and you can see this in the /src/Components/DisplayElements/Styles/ContentDisplayStyle.scss on lines 39 & 45. Wasn't sure if this was the right way to do this or not.

    Also, the image in desktop view scales fine, but I'm not sure I did this in the best way possible. I use background-size cover but again, not certain this is the best way to do things.

    This is a React TypeScript project leveraging SASS

    2
    Jeff•210
    @W4GFOPosted about 2 years ago

    Hello @correlucas Lucus,

    Wow! Thank you so much for the feedback. Unfortunately, I get a 404 when following your link, but I will dive into the picture tag for sure.

    Thank you again for the time you took taking a look at my project.

    Best, Jeff

    0