Make home page responsive and fix element overlap issues

[Rakielle]

Details

This PR addresses the home page responsiveness on smaller screen

Before

After

Fixes #91

[deneb-alpha]

I was testing the change and something improved, something is still missing...

Current

with your changes:

I tested your PR using the development tools in Firefox.
For the provided screenshots, I selected iPhone11 Pro iOS 14.6 as device. its resolution is 375x812
If this helps, the user agent was: Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1.

But in general, if you switch between the different devices available, you will see similar issues also on other devices.
From what I saw, with your changes, on all the devices I see the top part with the 2 buttons in the right way and the down part with the Latest news still with a broken layout

[deneb-alpha]

I'm afraid but the changes on the Latest news section looks broken to me.
the rendering is not good with the text that is still cut off etc

[raulillo82]

I've just tested it locally.
At first, selecting a small device (mobile phone size) with either Firefox or Chrome in developer tools was showing something weird, see this in Firefox:

and in Chrome:

But for Rachael it was fine. So I assumed the problem was my configuration of the developer tools, started a web server from the directory where I cloned Rachael's PR and opened it with my mobile. It is ok there, see:

raul@mordor:~/Documentos/gh-repos/uyuni-project/uyuni-project.github.io (master =)$ export LANG=C
raul@mordor:~/Documentos/gh-repos/uyuni-project/uyuni-project.github.io (master =)$ git checkout rachael/responsive-homepage 
Note: switching to 'rachael/responsive-homepage'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

HEAD is now at 16fa060 Make home page responsive and fix element overlap issues
raul@mordor:~/Documentos/gh-repos/uyuni-project/uyuni-project.github.io ((16fa060...))$ python3 -m http.server 8080
Serving HTTP on 0.0.0.0 port 8080 (http://0.0.0.0:8080/) ...

And the result looks fine to me:

I'm approving this PR, but would appreciate a second review before merging.

[raulillo82]

LGTM, but I'd prefer to have a second review.

[juliogonzalez]

I'm afraid but the changes on the Latest news section looks broken to me. the rendering is not good with the text that is still cut off etc

I see something similar to marina, in my case I am using Firefox, but without emulating a mobile device.

Should the design be responsive regardless of the device used, just according to the size available?

I also see some empty spaces:

[raulillo82]

Rachael, please have a look at the comment from Julio. Even if I can see it well in a mobile phone, the fact that we both see weird things when using the dev-tools in the browser, or simply resizing the window, makes me suspicious. Or at least, we'll need to wait till Marina is back and we can have another opinion (she's out this week).

[deneb-alpha]

well done! it works now!