Responsiveness issues

[Marco Agustoni]

Hi!
Sorry to bother again, but I have a few issues with the responsiveness of my site and maybe you can help me with that.

In order:

1 – In the mobile version of the site, it’s difficult to click on the drop-down items in the navigation menus. Most times when I try to click a voice on the drop-down, I end up clicking on the main voice of the navigation menu… hope I explained that clearly! 🙂

2 – I’m using qTranslate to have a multilingual site. I’ve put the idioms flag in the header just adding a simple thing in the header, I don’t know if it’s the best way:

<div style=’position:absolute; margin-left:900px; margin-top:15px;’><?php echo qtrans_generateLanguageSelectCode(‘image’); ?></div>

In the pc version it’s ok, but I can’t see the flag in the mobile versione. Is there a way to make it work?

3- In the mobile version, the Facebook widget has a problem: the icons exceed the border a little bit on the right.

A lot of things, I know… but I prefer to write you one time with a lot of things, than a thousand with one thing… 😉

Thanks!

Marco

[Bill Robbins]

Hello Marco,

Great questions. Let’s see if we can find answers for you.

1. Any chance you could send over a link to your site so I can take a closer look at your drop-down menus for you?

2. Here’s one way you might style your idiom flags:

<div style="position:absolute; right: 10px; top:15px;"><?php echo qtrans_generateLanguageSelectCode('image'); ?></div>

By positioning it from the right hand side, as the screen shrinks, it will hopefully keep the flags in view.

3. I’ll check on the Facebook link too when you send over the URL.

Thanks,
Bill

[Marco Agustoni]

This reply has been marked as private.

[Bill Robbins]

Without seeing the flag, it’s tough to know for certain. Most likely it’s positioned under another element. Even though you can see it, if a div or some other element is positioned over it vertically you won’t be able to click on it. You could try adding a z-index value to the style above and see if that helps. Perhaps something like this:

<div style="position: absolute; z-index: 2000; right: 10px; top:15px;"><?php echo qtrans_generateLanguageSelectCode('image'); ?></div>

For the Facebook overflow, give this a try:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .ot-facebook iframe {
   	width: 100% !important;
   	max-width: 100%;
   }
   

3. Update your settings.

See how that works for you.

[Marco Agustoni]

I know it wasn’t easy to help me without actually seeing the site… but you did it!
Both solutions worked.

Thanks again… respect! 😉

[Bill Robbins]

Fantastic! If you need anything else, just let me know.

[Author]

Posts