Fix Align VRMS logo

[bconti123]

Fixes #1917

What changes did you make and why did you make them ?

• I added @media (max-width:450px) for the mobile screen on VRMS logos aligned, because the changing padding on the desktop platform will affect the mobile platform.
• Changed padding to padding: 3vh for desktop and padding: 1vh 1vh 3vh 1vh for mobile.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[trillium]

Discussing these screenshots on the call tongiht

[trillium]

Hey Bryant, thanks for working on this!

Can we get the two divs on the page to have the same level of distance from the left edge?

If you need to add an internal div on the page feel free to, doesn't need to only be changes to the CSS file.

If possible as well I'd prefer if we steer away from using vh measurements for padding becuase of the way they vary. This might have been there already, feel free to clean up and change any padding/margin based vh units if you see them

[bconti123]

@trillium, Thank you for your feedback. I will work on and look into improving the responsive design.

[bconti123]

@trillium

I made the two divs have similar CSS (home-headers and home-bottons), and the alignment looks better. I removed padding and added margin-top and margin-bottom in home-headers from home.scss.

Let me know if any changes are needed.

[JackHaeg]

Hi @trillium! Can you please take a look at the updates @bconti123 made when you have a chance?

[trillium]

Hey hey, from the call today, would you mind making sure that the container width doesnt reduce as a result of this PR?

Thanks :)

[trillium]

As per chat, lets have the outside container establish boundaries for the content

Please use em units

[bconti123]

Hi @trillium, I updated the layout and replaced vh units with em units. I think I might have misunderstood part of what we discussed about the container in the previous Zoom meeting last week. I want to confirm. Is that yellow line outside the container we discussed? See screenshot below:

Yellow Line outside the app container

I would like to discuss the app container and share my screen in the meeting tonight.
Let me know what I should fix ahead of time. Thank you!

[trillium]

Hey Bryant, sorry to take so long here.

I feel like I've overcomplicated this. It's fine as it is now, happy to merge