Huddle-landing-page with Flexbox

Community feedback

• 

  Matthew•55

  @MatthewBosveldPosted almost 4 years ago

  I did this challenge a few days ago, and was struggling with this too. I managed to get them where I wanted eventually, although I'm not sure if the way I did it is clean/efficient enough. The only issue I had with this, is that the svgs change size when I make the screen smaller, but I ran into more problems with the scaling of svgs so I don't know if this code is to blame for it.

  .landing-socials { display: flex; width: 15%; justify-content: space-evenly; position: absolute; right: 5%; bottom: 5%; height: 60px; }

  0

  ---

  

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  @MatthewBosveld Thanks Matthew. Have you got your project deployed on github so I could have a sneak peek at your positioning? I understand when I set a div position to absolute I have to specify which div is relative to it? Which div did you set as relative to the absolute positioning of the icons?

  I will experiment with absolute/relative positioning although I think it my overwrite my flex properties I set for social media icons (I put them in separate flexbox and used flex-end positioning to move them to the right (but id didn't work for moving it to the bottom-which I initially thought it would have)).

  0

  

  Matthew•55

  @MatthewBosveldPosted almost 4 years ago

  @hachi-ops of course! https://github.com/MatthewBosveld/HuddleLandingPage

  I placed the logo's in landing-socials, which was in turn placed in the footer with footer-landing as a class (as I wanted multiple pages, with different styling in the footer).

  I'm sure using relative would also work, just having it placed in relation to the entire document, but for me currently it messes up the sizing, placement and spacing between the logos. I would have to look into fixing that as well, and I don't currently have the understanding to quickly figure that out, hahaha

  1

  

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  @MatthewBosveld Thanks, placing the icons in footer makes sense, I'll try it, thanks. I looked at your site and there are some issues at small resolution: text overlapping with images. I wonder why is that. Maybe you need to apply some margins/paddings. As for svgs: I noticed you have tried to resize svg for mobile design to work in all resolutions. It may be just easier to position the svg for mobile and svg for desktop separately for different screen sizes. It worked for me.

  0

  

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  @MatthewBosveld just looked at your code and it looks like you correctly applied two different svgs for mobile and desktop so I don't understand why it looks turned. Maybe if you use values to move it, for example for mobile resolution:

  background-image: url(images/bg-mobile.svg); background-position: top -15px right 0px ; background-size: contain; background-repeat: no-repeat;

  and then svg for desktop with different values in a same way.

  I applied different positioning for different screen sizes adjusting pixel values depending how much left/right/up or down I wanted to move it.

  0

  

  Matthew•55

  @MatthewBosveldPosted almost 4 years ago

  @hachi-ops I didn't notice text overlapping with images as I resized my screen earlier. Do you mean the text at the very bottom? That would make sense as I just added that without further attention, just to be able to upload it as a solution, haha.

  I used the mobile background svg because I had some issues with the coverage of the desktop bg, yeah. I think I got it to work eventually, but decided on using the mobile background starting from a larger resolution, just because I didn't like how the desktop background looked.

  0