Responsive

[Lucile Girodos]

Hi,
How and where can I configurate my website for responsive ?
Or which css class am I supposed to use to adapt title and boxes for my website on mobile phone ?
Regards,
Lucile

[Zex]

Hello, Lucile!

Can you be more precise?
What Title is not responsive?

Have you think on the Front Page Boxes? they should already be responsive …
Since your webpage is under construction mode, unfortunately, currently I can’t test it.

Can you give me some screenshot?

Regards

[Lucile Girodos]

Hi Zex,
The title is h3, but it’s only because I made a big/huge title, so on computer it’s ok. On mobile phone it’s smaller but still too much.
http://www.ancrages-ecriture.fr/tempimg/screenh3.png

Also the blockquote has too huge margin on mobile phone. I would like to make it smaller.
http://www.ancrages-ecriture.fr/tempimg/screenblockquote.png

Regards,

[Zex]

Hi, Lucile!

The next code should work for you(insert it into Customizing->General->Additional CSS):

/*Site title font-size fix*/
@media screen and (max-width: 994px) {
#masthead .site-title a{
	font-size:4vw!important;
	line-height:10vw;
}
}

For the blockquote, try to go with the next code:

/*Blockquote padding*/
@media screen and (max-width: 994px) {
.entry-content blockquote{
    padding: 10px!important;
}
}

https://prnt.sc/o0gy19

Change the values ​​as you wish

PS: Since I can not test the code on your website, I’m not sure if it will work properly, so if the codes do not work, please give me your WP Login credentials in a private answer and I will give you the appropriate code.

Regards

[Lucile Girodos]

Thank you,
It is working for both of it.

But unfortunately there is another problem. I cannot find how to change de .css menu navigation on mobile phone (the color and font size are not well).
I add mediaqueries on style.css it’s working on computer (when the window is small) but it’s not working when I look the website on mobile phone.
https://www.ancrages-ecriture.fr/tempimg/screenshot_nav.png
(The website is currently online if you want to see).

Regards,

Lucile

[Zex]

Hello, Lucile!

The submenu looks good on my phone.
https://prnt.sc/o1uym6

The Mobile menu Font-size and text color can be changed from the
Customizing-> Navigations->Navigations Mobile menu.
https://prnt.sc/o1uzjk

If you need to change the font size for the submenu, the next code should work for you:

nav.mobile-menu>ul.menu>li>ul li>a {
    font-size: 10px!important;
}

What phone/Browser do you using?

Regards

[Lucile Girodos]

Thank you very much for your rapidity to answer.
I am using mozilla firefox on my phone and computer. But on chrome and lilo on my phone it’s ok like you.
Thank for the code.
Everything seems good 🙂

Best regards,
Lucile

[Zex]

Thank you for your feedback.

Best Regards

[Author]

Posts