Title: Responsive styling Last modified: March 4, 2021 --- # Responsive styling * Resolved [fizzers](https://wordpress.org/support/users/fizzers/) * (@fizzers) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/) * 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 5 years, 3 months ago by [fizzers](https://wordpress.org/support/users/fizzers/). Viewing 6 replies - 1 through 6 (of 6 total) * Thread Starter [fizzers](https://wordpress.org/support/users/fizzers/) * (@fizzers) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14135668) * 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](https://wordpress.org/support/users/nikelschubert/) * (@nikelschubert) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14143578) * Hi, I am using this banner for the plugin: [https://github.com/osano/cookieconsent/tree/master](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](https://wordpress.org/support/users/nikelschubert/) * (@nikelschubert) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14144464) * Hi [@fizzers](https://wordpress.org/support/users/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 5 years, 3 months ago by [Nikel](https://wordpress.org/support/users/nikelschubert/). * Plugin Author [Nikel](https://wordpress.org/support/users/nikelschubert/) * (@nikelschubert) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14144499) * 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 5 years, 3 months ago by [Nikel](https://wordpress.org/support/users/nikelschubert/). - This reply was modified 5 years, 3 months ago by [Nikel](https://wordpress.org/support/users/nikelschubert/). * Thread Starter [fizzers](https://wordpress.org/support/users/fizzers/) * (@fizzers) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14167845) * 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](https://wordpress.org/support/users/nikelschubert/) * (@nikelschubert) * [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14174658) * Hi [@fizzers](https://wordpress.org/support/users/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. * ![](https://ps.w.org/beautiful-and-responsive-cookie-consent/assets/icon-256x256. png?rev=1959253) * [Beautiful Cookie Consent Banner](https://wordpress.org/plugins/beautiful-and-responsive-cookie-consent/) * [Frequently Asked Questions](https://wordpress.org/plugins/beautiful-and-responsive-cookie-consent/#faq) * [Support Threads](https://wordpress.org/support/plugin/beautiful-and-responsive-cookie-consent/) * [Active Topics](https://wordpress.org/support/plugin/beautiful-and-responsive-cookie-consent/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/beautiful-and-responsive-cookie-consent/unresolved/) * [Reviews](https://wordpress.org/support/plugin/beautiful-and-responsive-cookie-consent/reviews/) * 6 replies * 2 participants * Last reply from: [Nikel](https://wordpress.org/support/users/nikelschubert/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/responsive-styling-3/#post-14174658) * Status: resolved