Skip to content
OverviewSolutions
41
Comments
8
Chris
@chrisbailey85

All comments

  • William Anthony•220
    @wpittman06Submitted over 3 years ago

    Mobile design DOES works and am pretty proud of it. Desktop design is absolutely broken as you can see in the preview (sigh), and I have no idea where to start. I used Tailwind CSS for this project and its my first full foray into it and wanted to practice it. My breaks work until you enlarge the screen and my design breaks I followed some other devs and I went with the assumption we all shared screen size and everything was working UNTIL i went full screen. How does one figure out media query breaks? Any insight into my design is VERY much appreciated.

    Also whenever i put folders in the Github repository it never sees my work and i have to drag and drop the actual files for Git to see my actual stuff. If you look at my other projects that say "files not found" you can actually click on the projects and will be taken to them but they aren't shown for some reason. Anyone have a fix or suggestion as to how i might do better uploading my files?

    Mobile First, HTML Tailwind CSS

    4
    Chris•740
    @chrisbailey85Posted over 3 years ago

    I have not used tailwind before myself but you seem to be on the right track for mending the desktop. On your .showcase div if you add a grid template rows to it so you've got two rows instead of one, and then hopefully it should just be a case of placing everything in the correct rows and columns. Good job on the mobile size's it looks good.

    0
  • Gabriel Monsalve•320
    @Gabrieldev-web-coderSubmitted over 3 years ago

    Hi, here with other challenge of this plataform.

    In general i want that someone give me tips for improve my sass code.

    I do my best trying to make it the closer as possible with the design, i used sass, if someone can show that and say me how i can improve the sass code will be great, and in general best practices also be great.

    Any other feedback always is helpful, have a nice day guys <3

    Clipboard landing page with scss, flexbox and grid

    4
    Chris•740
    @chrisbailey85Posted over 3 years ago

    I'm only just getting started sass myself but I think as a best practice you shouldn't use capital letters on your class names, it makes it a bit more difficult to read. I also just learnt about something called BEM, which is a set of rules for when writing classes, it looks like you were using it in places but I did only learn about it today so I wasn't 100% sure.

    1
  • Isiah Jones•240
    @Coder-IsiahJonesSubmitted over 3 years ago

    What's the best practice approach for developing different device resolutions? I tend to like the desktop-first approach but have trouble sometimes converting over to smaller resolutions in CSS. I want every screen resolution size responsive to my liking. I usually use Boostrap so it takes care of it but my CSS skills with media queries are not there yet and it seems more time-consuming. Any tips and tricks with documentation would be great!

    HTML, CSS, and Javascript Implementation

    1
    Chris•740
    @chrisbailey85Posted over 3 years ago

    I was always doing desktop first and then adjusting it to smaller screens. I switched to do a mobile first a little while ago, I have found it's a lot easier but it does take getting used to.

    I found the navbar switch over the most difficult part but I learned about CSS property called "all" the other day. You can set it to unset which removes all the the CSS properties that you've applied, which made it a lot easier for and navbar at least.

    0
  • Alizzie•140
    @AlizzieSubmitted over 3 years ago

    Hi. It is my first time using grid and I learned a lot. I worked on it for five days in a row. Sometimes 2-4 hours, sometimes all day. I can't judge whether the duration is good or not, so I wanted to ask how long you usually are working for a challenge/ project.

    Furthermore, do you know any good tools where you can measure the pixels of an image? I am currently guessing the width of the elements.

    I will also be happy about some feedbacks. Thanks :D

    Loopstudios Landing Page with HTML, CSS and vanilla JS

    3
    Chris•740
    @chrisbailey85Posted over 3 years ago

    Well done that looks great. On your social media icons the hover line doesn't go all the way across.

    I've never seen the figure tag before, after a quick Google I think I need to look into html a bit deeper, I would have ended up using div to make this.

    If you're on Windows you can open the files in the the windows photos right click and view file information and it will give you the dimensions.

    0
  • Chris•740
    @chrisbailey85Submitted over 3 years ago

    This project has made me realize I need to go and do a bit more studying on making navbars. I'm fine with making a mobile nav. it's converting it into a desktop version I'm having issues with.

    I also had a problem positioning the mobile phone's image. I set the section to overflow hidden, to stop the circles coming outside the section. I then couldn't bring the picture of the mobile phones on top of it. In the end, I set it to an after pseudo-element on the section before and pushed it down.

    I also time in myself this time it took me 8 hours and 29 minutes.

    Any feedback would be appreciated thank you.

    Sass, js and flexbox

    1
    Chris•740
    @chrisbailey85Posted over 3 years ago

    I'm not sure why the mobile phones are positioned like that in the screenshot. I've tried to find the screen size that it does that on using the Google Chrome developer tools, but it never lines up like that which is weird.

    0
  • Chris•740
    @chrisbailey85Posted almost 4 years ago

    Well done it looks good. The only thing is the arrows on you buttons looks a little out of place as there off centre. I had a little fiddle and you can fix it by, giving your .icons a display: flex; and then on the buttons a display flex, justify-content: center; and align-items: center;

    1
  • Chris•740
    @chrisbailey85Posted almost 4 years ago

    I've just had a look, and had a little fiddle. You need to remove the background size and then adjusted positions. I'm not 100% sure as I'm still learning myself, but I think what's happening is when you've set the background size too 100% it's increasing the size of the of the svg, which is then causing the problem with the positioning as the svg is bigger than it was supposed to be to work for the design.

    0
  • Mark Sainsbury•45
    @Sa1nersSubmitted almost 4 years ago

    My second challenge, so all feedback welcome. I was not happy with the position of the images within the four boxes but could not find a better way to adjust their position within the individual divs. Any suggestions greatly recieved.

    Four Card Feature Section using HTML & CSS

    2
    Chris•740
    @chrisbailey85Posted almost 4 years ago

    Well done. I haven't actually done this challenge myself yet but I have been planning out how I would do it as it's one I plan to do soon. For the positioning of the cards I recommend looking into css grid, when I first saw this project I felt like it would be a perfect project for practicing css grid, I think you could also do with reducing the box shadow on the cards.

    1