This thread is resolved. Here is a description of the problem and solution.
Problem:
I expected to see: responsive page on mobile, I previously inquired about the same issue with the custom posts, but this issue is also affecting ordinary pages.
Solution:
It is a custom CSS codes problem, in the HTML source codes of problem page you mentioned above,
view-source:https://mindfulness.ie/about/fiona-odonnell/
line 144, there is a CSS code:
@media (min-width: 0px){
.container {
width: 750px;
}
}
You can try to modify it to:
@media (min-width: 0px){
.container {
width: 100% !important;
}
}
And test again, see screenshot CSS3.JPG
https://cdn.toolset.com/wp-content/uploads/2018/01/606638-css3.JPG
Relevant Documentation:
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | - |
| - | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Hong_Kong (GMT+08:00)
This topic contains 5 replies, has 2 voices.
Last updated by peterr-4 6 years, 8 months ago.
Assisted by: Luo Yang.
I am trying to: get pages to be responsive
Link to a page where the issue can be seen:
hidden link
I expected to see: responsive page on mobile
Instead, I got: non responsive
I previously inquired about the same issue with the custom posts, but this issue is also affecting ordinary pages.
Hi,
It is a custom CSS codes problem, in the HTML source codes of problem page you mentioned above,
view-source:hidden link
line 144, there is a CSS code:
@media (min-width: 0px)
.container {
width: 750px;
}
You can try to modify it to:
@media (min-width: 0px)
.container {
width: 100% !important;
}
And test again, see screenshot CSS3.JPG
Hello Luo, I have tried what you suggested, but the rule is not being applied. See screenshot4.jpg and screenshot5.jpg below.
What would be causing this in the first place, as it is affecting other pages as well?
I think there is a a problem with the way I am using the plugin.
Also, why can I not create a new page without getting the pale yellow overlay on the editing screen?
See screenshot6.jpg
How do I stop this happening? Thank you.
