Responsive Design Tweak

HTML & CSS
1

Good Morning All

I’ve been working on a css responsive design issue and have decided to post to find the best practise solution.

On the following site http://tinyurl.com/lec3fn2 there are two flags at the bottom that allow the user to go to the English or Italian version of the site.

At 946 pixels the flags and text disappear. I’ve been playing around with negative margins, but would it be possible for someone to provide advice on the best way of getting these flags to appear and I will use this as an example for the future?

In advance I greatly appreciate any assistance here

Didcot84

2

Right now the language flags are hiding behind the copyright line at narrow widths.

What would happen if you did not use absolute positioning on the copyright line and included it in the footer container instead… and didn’t use a fixed height footer or position:relative? I think a different choice of sticky footer would work better than your “fixed” footer.

What do you think?

3

Thank you very much Ronpat

I will try that shortly and come back to you

4

Hello Ronpat

Thank you for pointing me in the right direction, that was extremely helpful. In the end , I removed the classes that had been created and moved the flags alongside the copyright information.

I appreciate you getting back to me so quickly

Many Thanks

5

Your page is looking very nice, didcot84.

Thank you for the feedback.

Best2U

6

Hello Ronpat and Others

Sorry to be a pain, but there is one other issue with the responsive menu on this site. In Safari and chrome, the final two menu items, news and contact are blocked off and you cannot scroll down to access them. You wouldn’t have anyway of knowing that they were there. Firefox works as expected.

I took all the footer coding away in case this was making any difference, but the issue remained.

Would it be possible to be provided with some advice and assistance?

7

Hi,

You could position the fixed nav above the footer so that it isn’t hidden.

e.g.

@media only screen and (max-width: 950px) {
#navigation-mobile {height:auto;bottom:90px}
}
8

Thank you so much Paul

I will try that coding later on this evening and let you know the result

9

Thank you Paul

That has worked perfectly, thank you for your help there.

I hope that your day goes well

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.