Skip to content
OverviewSolutions
0
Comments
13
Declan
@declanslevin

All comments

  • Declan•300
    @declanslevinPosted almost 5 years ago

    Hi Lukas,

    Good job on your first submission :)

    The first thing I noticed on mobile is that your content gets cropped slightly by the edges of the screen.

    You can fix this in two steps: 1. By wrapping a 'container' div around your body content and adding some padding/margin to this container, which will give you some space either side of your content. You could also just apply the padding to <body> but this can introduce issues if you were to apply a background colour/gradient/image. It's considered good practise to use a separate div as a container instead.

    1. Then you will need to remove the 'fixed' width values on your card divs - you can use max-width instead of width and the card will adjust its width based on the amount of space available rather than push content off-screen.

    The content inside your divs could also use some padding as it currently reaches right to the edge.

    You should definitely have a go at making it responsive next by adding in styling for larger screens using media queries :)

    2
  • Shaughn Roque•150
    @shaughnroqueSubmitted almost 5 years ago

    I had trouble trying to make this landing page mobile friendly. Any good resources to learn more about media queries and what dimensions to use. Also how do you test for mobile responsiveness? I wanted to do this landing page to practice Flex Box but it wasn't working how I wanted it to work. Any tips on this as well? Thank you in advance!

    HTML, CSS, and a little Flex Box

    2
    Declan•300
    @declanslevinPosted almost 5 years ago

    For your use of flexbox, it looks like it's probably not working because you need to set display: flex on the parent container for the elements you want to position. So in your case it would need to be on the wrapper around the icons.

    A fun way to get to grips with the basics of Flexbox is a game called Flexbox Froggy. If you want to become a Flexbox master then you can give Flexbox Zombies a try :)

    1
  • Shaughn Roque•150
    @shaughnroqueSubmitted almost 5 years ago

    I had trouble trying to make this landing page mobile friendly. Any good resources to learn more about media queries and what dimensions to use. Also how do you test for mobile responsiveness? I wanted to do this landing page to practice Flex Box but it wasn't working how I wanted it to work. Any tips on this as well? Thank you in advance!

    HTML, CSS, and a little Flex Box

    2
    Declan•300
    @declanslevinPosted almost 5 years ago

    Hi sroque,

    You could try taking a look at w3schools media queries or CSS-tricks Media Queries.

    A good approach to take is mobile-first: build your page for mobile first, then add media queries to style your page appropriately for larger screen sizes. Once you are happy with your mobile layout, you can add a media query such as @media (min-width: 376px) { } and anything you add in the curly brackets will be applied for screen sizes at or above 376px.

    An easy way to test for mobile responsiveness is to use the Chrome Dev tools (right-click on a page element and select 'Inspect' or Cmd+Option+J (mac)/Ctrl+Shift+J (Windows)). In the top toolbar next to the 'Elements' tab, there is a device icon - click this and it will allow you to emulate different screen sizes. You can select the desired size at the top of the emulator or drag the edge to manually adjust.

    It's a good idea to get your layout right for key screen sizes (375/1024), then drag the screen edge back and forth to see how your elements respond. This will quickly show you where your layout is breaking.

    1
  • Declan•300
    @declanslevinPosted almost 5 years ago

    Hi exnihilo0912,

    Great job, this looks really good. Your code is really clean and well structured.

    The only thing I can suggest is maybe you could add a hover effect to the 'learn more' buttons.

    Keep up the good work :)

    2
  • Declan•300
    @declanslevinPosted almost 5 years ago

    Hi Prem,

    This looks really good!

    I did notice though that your page responsiveness breaks between 400px and 1050px. I think partly this is because you have fixed widths on your form elements - I would suggest using max-widths instead. Alternatively you could use a percentage width on the parent container and set all the child elements to be 100% width.

    It's also a bit odd that you have nested everything inside the <header> element. You probably don't even need the <header> element because there is no obvious header on the page design.

    I recommend you take some time to fix the issues highlighted in your site report. Otherwise, great job!

    2
  • bwhitney2439•545
    @bwhitney2439Submitted almost 5 years ago

    I'm not 100% happy with this one. Criticism and praise welcome. :-)

    SCSS, flexbox

    2
    Declan•300
    @declanslevinPosted almost 5 years ago

    I'm curious what you're not happy about, it looks great!

    It's a matter of personal preference, but something I like to do with SASS is nest my media queries in the class declaration - something like:

    .page-container {
  display: flex;
  line-height: 1.5;
  flex-direction: column;
  justify-content: space-between;

  overflow: auto;
  height: 100vh;
  color: white;
  padding: 40px 80px;

  @media screen and (max-width: 675px) {
    text-align: center;
    padding: 2rem;
    height: 100vh;
  }

  .top-row {
    display: flex;

    @media screen and (max-width: 675px) {
      margin-bottom: 15px;
    }

    img {
      max-width: 100%;
      height: auto;

      @media screen and (max-width: 675px) {
        max-width: 50%;
      }
    }
  }

    You end up with more media queries, but this way your original declaration and media query declaration are right next to each other. When your .scss files end up being hundreds of lines long, if you need to change something, you don't need to keep scrolling up and down to change the value in 2 places :)

    1
  • Declan•300
    @declanslevinPosted almost 5 years ago

    Another thing I noticed is that you are using style attributes in your HTML - this is considered bad practise as it introduces problems with CSS specificity (I highly recommend you take some time to learn about this if you haven't already! CSS Specificity). The style attribute will always override any external styling (i.e. from a CSS stylesheet) unless you use the !important tag in your CSS (which is also considered bad practise). In larger projects this can cause you a lot of headaches and it is best to be avoided. Stick to using class attributes and do all of your styling in a stylesheet :)

    2
  • Declan•300
    @declanslevinPosted almost 5 years ago

    Hi MatiGH,

    First off, good job, it looks really slick!

    I've noticed you have some issues with responsiveness - try dragging your screen width and watch what happens - the 'modules' get out of alignment between 755px and 1125px. A solution you could try would be to use the Flex property order (Flex Order) when between these widths to re-order your divs so that 'Calculator' and 'Supervisor' modules appear in a column together, rather than being split by the div that contains the other modules.

    Also, you are using fixed values for setting the height/width of the modules - this can negatively affect responsiveness. I would recommend using min/max-height/width or a relative value like a percentage % instead.

    One last thing is that you are using <p> elements for 'Reliable, efficient delivery Powered by Technology'. The styling on these suggests to me that these are intended as headings, so it would be a good idea to use a <h1> and <h2> instead.

    2
  • Declan•300
    @declanslevinPosted almost 5 years ago

    While float works for what you've used it for, this is actually incorrect usage. Float was originally intended for wrapping text around an image and not for positioning elements on the page.

    Instead you are better off using Flexbox as this was developed purely for positioning and layout. You can align items to the right of the screen by using justify-content: flex-end.

    1
  • vladstarcev•60
    @vladstarcevSubmitted almost 5 years ago

    Hi! When i positioned the cards from left and right, i used margin-top CSS property. But when i resize the browser to smaller width, so it is matching the mobile width, the "margin-top" property remains the same of those cards, so they are not aligned properly on the mobile size. The only solution i could think of is creating class "shifted" with margin-top property, and assigning it to the side cards using javascript, checking the width of the "body" element.

    If somebody managed to complete the challenge without using javascript, please let me know! Thanx in advance!=)

    HTML, CSS, Bootstrap, JavaScript

    3
    Declan•300
    @declanslevinPosted almost 5 years ago

    Also, I would recommend you use the position property rather than margin-top to help with your positioning.

    You can set the parent container for a card to position: relative, then set the card itself to position: absolute. Then using the top property you can control how the card will be positioned relative to the parent container.

    I hope that makes sense, and I'm happy to answer any questions you might have about positioning in this way.

    Alternatively, you can also use Flexbox and CSS Grid for positioning, but I would recommend you learn as much as you can about position first before moving onto those :)

    1
  • vladstarcev•60
    @vladstarcevSubmitted almost 5 years ago

    Hi! When i positioned the cards from left and right, i used margin-top CSS property. But when i resize the browser to smaller width, so it is matching the mobile width, the "margin-top" property remains the same of those cards, so they are not aligned properly on the mobile size. The only solution i could think of is creating class "shifted" with margin-top property, and assigning it to the side cards using javascript, checking the width of the "body" element.

    If somebody managed to complete the challenge without using javascript, please let me know! Thanx in advance!=)

    HTML, CSS, Bootstrap, JavaScript

    3
    Declan•300
    @declanslevinPosted almost 5 years ago

    Hi Vlad,

    I suggest you take a look at CSS media queries (e.g. @media ( min-width: 376px ) {})- these will allow you to set different CSS property values depending on the screen width. When rules are set within a media query, they will only be applied once the condition is met. So in the example above, any CSS rules set within the query will only be applied when the screen width is above 375px in width.

    1
  • Vincenzo Marcovecchio•1,085
    @VincenzoMarcovecchioSubmitted almost 5 years ago

    I made quite a few errors out there i'm sorry i'm really new to this.. by the way ,my relative Url on background image is not loading on the pseudo element why?

    Fylo dark theme landing page

    2
    Declan•300
    @declanslevinPosted almost 5 years ago

    Hi Vincenzo,

    The relative url isn't working because it is expecting the 'images' folder to be in the same folder as your CSS file. You need to go up a level in the directory tree to get to the images folder correctly, e.g. url(../images/bg-curvy-mobile.svg);.

    For relative paths, . points to the current directory, while .. points to the parent directory. You can chain .. together to go up several levels from your current directory e.g. ../../../folder/file.ext

    1