responsive website

ecoledelavue · Member · Feb 8, 2016 at 5:15 pm
Copy link

Add topic to favorites
I am trying to make my website responsive. When open on a mobile tu navigation falls behind the content of my pages.

Any ideas on how to fix this ?

Thanks

The blog I need help with is: (visible only to logged in users)
antoniancu · Member · Feb 8, 2016 at 5:21 pm
Copy link
Salut ecoledelavue,

I’d like to try to help you. I see the demo “Argent” theme does not have this problem. I’m assuming you’ve made some customizations to the site’s CSS?
timethief · Member · Feb 8, 2016 at 5:27 pm
Copy link
There are 151 Free Responsive Layout WordPress Themes you can browse here https://theme.wordpress.com/themes/features/responsive-layout/?sort=free

Did you perchance enable the mobile theme on a responsive layout theme? That will queer it for sure.

The mobile ready theme is a default theme and a completely different theme that you do not need to enable, if your theme is listed as a responsive layout theme. The mobile default theme is provided only for those who run older themes that aren’t the gold standard for themes, which is responsive layout.

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme

You can read more in the support docs at https://en.support.wordpress.com/themes/mobile-themes/

You can test your site at this link https://www.google.com/webmasters/tools/mobile-friendly/

The missing widgets issue can also be caused by incorrect widget visibility settings https://en.support.wordpress.com/widgets/#widget-visibility
justjennifer · Member · Feb 8, 2016 at 6:12 pm
Copy link
@ecoledelavue, @tt – I agree with antoniancu here. If you resize the Argent Demo site https://argentdemo.wordpress.com/ to approximate the width of a mobile phone, everything resizes automatically to suit that format. However ecoledelavue.com does not when I resize my browser screen.
timethief · Member · Feb 8, 2016 at 6:31 pm
Copy link
@justjennifer
Thanks so much for wading in here.
thesacredpath · Member · Feb 9, 2016 at 7:07 am
Copy link
This one has me scratching my head. I can’t figure out what is causing this, but add the following to the very end of your custom CSS.
```
@media screen and (min-width: 850px) {
.page-content {
    max-width: 800px;
    width: 100%;
}
}
```
The only issue is with professionnelle in the h3 content right below the header image, which is too long to display on a phone screen at the font size used. I would suggest a Media Query at perhaps 550px to reduce that so that it can fit on a phone screen, something like this.
```
@media screen and (max-width: 550px) {
	.page-id-1 .page-content h3 {
		font-size: 35px !important;
	}
}
```
Also, you have some non-breaking spaces in that text that is causing issues, and in particular the one between formation and professionnelle. I would suggest replacing that with a standard space.

No items found.