Responsive styling

  • Resolved fizzers

    (@fizzers)


    4 years ago

    Hi there,

    Please could you clarify what css is applied by your stylesheet on mobile / smaller screen sizes?

    I’m using the bottom banner and while it looks great with some extra formatting on desktop, I’m having some issues on mobile. For example, it automatically changes to 50% width; is this as a result of the banner type changing or just applying styling to the bottom banner that I selected?

    I have basically ended up with the below css to keep the font-size down and also stretch it across full width, but I’d like to understand better what’s going on so I can apply the correct solution.

    @media only screen and (max-width: 767px) { 
.cc-window.cc-banner, .cc-window.cc-floating, .cc-window.cc-left, .cc-window.cc-right, .cc-window.cc-banner .cc-message 
	{
	font-size: 1rem !important;
	min-width: 100% !important;
	}
}
    • This topic was modified 4 years ago by fizzers.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter fizzers

    (@fizzers)

    There’s also a bottom margin applied underneath on mobile which doesn’t exist on desktop – again a bit confusing – but hopefully an easy solution once you are able to clarify.

    Thanks!

    Plugin Author Nikel

    (@nikelschubert)

    Hi, I am using this banner for the plugin: https://github.com/osano/cookieconsent/tree/master

    Does that help you? If you have found a solution to that issue would you mind to share it? So that I can add it to the Plugin?

    Regards

    Plugin Author Nikel

    (@nikelschubert)

    Hi @fizzers ,

    I made some additional tests, and the problem is defintive with some templates. For example the new Twenty Twenty-One has this problem.
    The twenty twenty not. It would be really great if you could help me fixing this bug.
    And it is the widget area who is causing this.

    Regards

    • This reply was modified 4 years ago by Nikel.
    Plugin Author Nikel

    (@nikelschubert)

    Ok, the problem in my case is a very long title in the widget area, which does not wrap.
    In twenty-twenty this title has a word-wrap, so it works.
    In twenty-twenty one, it has no word-wrap.

    I am not sure if that is something which can be fixed by the banner. Because this missing word wrap causes the template to get extremly wide, which is not an nice UX.

    Please let me here your opinion on that.

    adding this css fixes the issue in my case:

    
*, *::before, *::after {
    word-wrap: break-word;
}

    but it might break some other parts of the template.
    Regards

    • This reply was modified 4 years ago by Nikel.
    • This reply was modified 4 years ago by Nikel.
    Thread Starter fizzers

    (@fizzers)

    Hello, apologies for delayed response.

    I think that the source of the issue is that the banner type/class changes dynamically depending on screen size (specifically: .cc-banner.cc-bottom becomes .cc-banner.cc-floating on mobile)

    Once I realised that, I could safely ignore the other classes and simplified the css a bit. So far it seems to do the trick.

    Thanks for your help.

    Plugin Author Nikel

    (@nikelschubert)

    Hi @fizzers,

    I am happy that you could solve your issues, would you mind sharing your improvments? Maybe i can include them in one of the next releases?

    Regards
    Nikel

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Responsive styling’ is closed to new replies.