[mescomptoirs]

Hi!

I have a problem with my blog on Iphone.
It is not anymore responsive.
Could you help me? http://www.mescomptoirs.fr/blog

Thank you very much 🙂

[Mahesh]

Hi @mescomptoirs,

Seems you are using some Custom CSS and that is creating the issue.
http://www.mescomptoirs.fr/?custom-css=1&csblog=1&cscache=6&csrev=51 is that CSS. Have you used any plugins for it? Try disabling it and it will fix the issue.

Regards,
Mahesh

[mescomptoirs]

Hi @mahesh,
Thank you for your answer.
In fact (and excuse my bad english :-)) in 2015, I worked directly on the CSS code to modify my theme (i work on wordpress site and not directly on the FTP servor). I didn’t upgrade CatchBox for a while and I never created a child theme (I know, not good at all :-S).
When I upgraded in december, of course, all my modifications vanished.
Hopefully my web hosting had a safeguard (good word?).
As my website is a way to join my onlineshop I had to put it back, even if it was not perfect.
So, I copy/paste my entire css code of my past version of Catchbox, but now, not directly in the editor of the code but in the page named in french “modifier le CSS” : modify the CSS.
I think it’s why it’s bugging.
When I saw it was not good, I cleaned this code in and I just kept the part of the code really modifying the theme. I checked I didn’t copy/paste a part of code which was about the responsive theme.
But it’s not working 🙁
I use plugin on my theme, but not to write my custom CSS (if it’s your question). I use Jetpack and I customize it on my custom CSS.
Maybe it’s the problem? Because the code I use, I write it with the Jetpack helper.

With this explanations, does it help you to understand better my issue?

Thanks 🙂

Marie-Anaïs

[mescomptoirs]

@mahesh

In complement
I just try to delete the custom code for Jetpack and it doesn’t change anything.
Should I disable Jetpack?

[mescomptoirs]

@mahesh

In complement (repeat :-))
I disabled all of my widgets, plugins, I doesn’t change anything.
When I deletes all of my custom css, it worked.
But only on the blog page, not on the main one.
I was wondering if it is because I changes the size of the #main on the one column page and the #content on the other…
The problem is, I want it to be changed…

[Mahesh]

Hi mescomptoirs,

Seems you’ve add a lot of Custom CSS in jetpack. When I removed all the Custom CSS from jetpack for in your site with firebug for checking, your site is working fine and is responsive too. So the problem is because of Custom CSS.
Changing colors etc won’t create such problem but changing or fixing width does. As you’ve mentioned that you’ve changed the size of #main and #content this may cause problem in responsive design. As checking you site, you’ve some CSS to make .one-column .site width to 1000px (fixed width – not applicable for responsive design).
You have to change the CSS for this, i.e. changing the width as per the display width changes.

Let me know if can help you further.

Regards,
Mahesh

[mescomptoirs]

Hi @mahesh :

Thank you very much for your answer.
When I disabled my custom CSS for the #content (not fixing a size), it worked for the pages not using the.onecolumn!! Great.
As you see, it doesn’t work for the main page (one column) because, there, I fixed it at 1000px.
But if I don’t, on the website, it reduce automatically to 700 px which makes the menu bugging… 🙁 As I’m not a pro in CSS, I don’t know how to make the width on computer being 1000px (the size of the menu) and keep it responsive.
I have to admit that I’m lost for this part 🙁

[mescomptoirs]

@mahesh : you can see the picture of what it makes when i disabled the fix width on the .onecolumn on this webpage : https://openclassrooms.com/forum/sujet/probleme-width-responsive-sur-iphone?page=1#message-90670596
(I asked in France, in french, for my problem, they suggested me to use media-queries but I don’t know if it could work for my problem)

[Mahesh]

Hi @mescomptoirs,

Yes, the website is reduced to 720px which makes the menu bugging due to the media queries. You do have to manage it properly for all breaking points.
Yes, you do have to use the media queries. Please use the following CSS. I assume, adding this to theme’s Custom CSS won’t work as Jetpack’s Custom CSS executes at the last. Add it to the jetpack custom css hope it helps.

@media screen and (max-width: 1024px) {
    .one-column .site {
        width: 960px;
    }
}

@media screen and (max-width: 990px) {
    .one-column .site {
        width: 910px;
    }
}

@media screen and (max-width: 960px) {
    .one-column .site {
        width: 720px;
    }
}

@media screen and (max-width: 767px) {
    .one-column .site {
        width: 600px;
    }
}

@media screen and (max-width: 640px) {
    .site, .one-column .site {
        width: 460px;
    }
}

@media screen and (max-width: 479px) {
    .site, .one-column .site {
        width: 100%;
    }
}

Note: This will make your hope page responsive, however, the slider may seem a bit odd, because of max-height defined for the slider.

Regards,
Mahesh

[Author]

Posts