Hello,
My website seems to have lost it’s responsiveness on smartphones.
Any ideas on how I can change this?
Also, I would like to change the font color in the widgets - I guess it’s a link issue (since they are all links) but I don’t know where I find this…
And oh, here’s the website: https://beta.ensr-ape.ch
Ok, so I have changed the color of the links.
But still: the mobile responsiveness problem is still there, with all the text aligned to the left in a long line. Any suggestion?
Thanks!
Hello I have a problem with my site, on the desktop it is displaying well, But the view on mobile phone it does not show well
i select the option theme optimitation for mobile on jetpack appearance but i can´t see it well
Hello there,
I hope you are doing well today.
You can use the following CSS code to fix the website appearance on mobile by going to Appearance > Customize > Additional CSS and pasting it there.
/*Mobile appearance fix*/
p {
width: 100%;
}
@media screen and (min-width: 480px) {
.home-widget{
width: 100%;
}
}
Best Regards,
Support
Hello,
thank you!
Works like a charm for the upper part of the page, but not for the widgets…
They are set side by side when on big screen, but appear beneath each other on smartphone (which is good), but still crammed to one side.
If I change the width to 100 % in the code below, they will not be next to each other on big screen, but look great on smartphone.
.home-widget {
font-size: 16px;
text-align: center;
margin-right: 4%;
width: 30.66666%;
padding: 0;
}
Any solution?
Also: would like to “push” the logo to the left, or put it in the nav bar, so that it aligns with the nav bar text (it’s now “floating” on top, which makes the top of the page look weird).
Alternatively, center it on top of the navbar, but when I tried that (and to center the navbar), the navigation messed up completely on smartphone… Is this possible?
Thanks in advance!
I Have the same problem! My buttons on my blog wont work on mobile devices. Anyone has an answer already for this?
Kind regards!
Hello there,
I hope you are doing well today.
Please try using the following css code to align the logo and the menu:
div#logo {
width: 100px;
height: auto;
float: left;
display: inline-block;
}
@media (min-width: 768px)
bootstrap.min.css?ver=4.7.3:5
.navbar-collapse {
width: auto;
float: right;
}
Best Regards,
Support
Hello,
thanks again!
Only - that (of course, should have thought of that…) made the logo very small…
So - is there then a way to center the logo above the nav bar instead?
And then:
Any solution to the widget problem, on mobile (see attached file)?
Thank you so much for your kind help!
Hello there,
I hope you are doing well today.
In order to try and center the logo please remove the previous CSS code that was added to the theme.
As for the widget area, please try the following CSS code to fix the widget on mobile:
@media screen and (min-width: 480px) {
.home-widget {
width: 100%;
}
}
Best Regards,
Support
So still no fix for the mobile responsiveness than…?
Hello again,
actually, the last code didn’t change anything for the mobile responsiveness - the text is still aligned to the right. I would like the three widgets to be next to each other when on big screen, and below each other when on mobile - but they still cram up to the left side…
Also:
When I try to center the logo, that’s when the nav bar stops working on mobile. Any solution to that?
Best regards and thanks in advance.
Hey guys,
Hope you’re doing well today
@elisabetho, my apologies, the CSS was incorrect. It should be max-width instead of min-width for mobile. Basically the code previously applied the CSS to devices above 480px in width instead of below 480px. Sorry about that. So the correct CSS is this:
@media screen and (max-width: 480px) {
.home-widget{
width: 100%;
}
}
Please add the CSS below to center the logo:
@media screen and (min-width: 768px) {
.navbar-header {
margin-left: 35%!Important;
}}
I hope that solves the problems. 
@sizzlingoods you can use the CSS below to fix that issue:
@media only screen and (max-width:500px) {
.widget-area{
clear: both!important;
}
}
Please let me know how that works out for you.
Best Regards,
Support
Yes - that worked!
Now, one last question: can I center the nav bar as well?
Thanks in advance.
Hey there,
Hope you’re doing well today
Kindly add and save the following code to Appearance > Customize > Additional CSS:
@media only screen and (min-width:1025px) {
.nav.navbar-nav {
float: left!important;
margin-left: 10%!important;
}
}
Best Regards,
Support
Thanks!
That worked well too.
Now: can I add space under the logo, so that the navbar doesn’t “touch” it and get a less crammed look?
Thanks in advance.
Hey there,
I am glad that worked.
Please use the following CSS code to add some padding below the logo:
/*Logo Padding*/
div#logo {
padding-bottom: 10px;
}
Best Regards,
Support
Perfect.
Thanks!