Format For Mobile Sub-Menu

Resolved ma3ry
(@ma3ry)

1 month ago

On mobile GTranslate was only showing the current language without the options of other languages. I am using Kadence Theme and they suggested that I add an HTML block with shortcode [gtranslate] in the Off Canvas menu. (Not sure why HTML block and not shortcode block, but I tried shortcode block and it doesn’t work.).

Link to screenshot in case anyone else has this issue. https://ibb.co/6JwGx4K1

So this is a great solution because now I can see all the language options, however on mobile there are 6 languages (flags) in two columns, and the second column is not vertically aligned.

Link to screenshot https://ibb.co/SXqd64fJ

I understand that they are not in columns on tablet, just on mobile, so I’m not sure how to vertically align the second column, unless perhaps making them into just one column? I tried

.mobile-html .gtranslate_wrapper {
width: 100% !important; }

but it didn’t work.

Can you tell me please how to align vertically the language options for mobile, preferably in two columns but one if that is not possible.

Many thanks!

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Plugin Author

edo888

(@edo888)

3 weeks, 3 days ago

Hi,

It looks like you have managed to do it via the following CSS code:

@media only screen and (max-width: 768px) {
    .mobile-html .gtranslate_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }
}

Thanks! 🙂

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.