Responsive Problem

Hey,
I’m having some responsive problems on this website: stphouse.com/dev

  1. Row background image ends before text does (screenshot). How can I set the images to be parallax on every screen size so the height of the image will stay fixed?

  2. Facts section looks odd on mobile devices (screenshot). I tried to do this solution but it didn’t help. How can I set them to be 1 or 2 per line?

  3. The navigation bar covers the welcome area on pages (screenshot). I want to set it to be above the welcome area, how can I do it?

  4. Also about the navigation bar - I would like to make it not transparent when responsive. On big screens I want it to keep the opacity but on mobile it looks bad (screenshot). I will also like to change the hover color of the link from the current blue to grey when on mobile.
    I tried this options (1, 2) but they didn’t work.
    This code didn’t work too:

@media only screen and (max-width: 600px ) {
    .main-navigation a {
	color: #000;
    }
    .main-navigation a:hover {
	color: #757575;
    }
}

I’m trying to fix it all for few days now and hope you’ll be able to help me!

Thanks in advance,
Hadas

Hello Hadas,

Can you please create separate topics for your questions in order to make it easier to help you?

Kind Regards, Roman.

Done

Thank you Hadas!

Kind Regards, Roman.