CSS Media Queries for Mobile & Tablet WordPress
- SOLVED
site: nationalmedicalreviews.com
This "questions box" does not look good on mobile. It "breaks" the page and is far off to the right.
Screenshot: http://screencast.com/t/F8SFIln6yi
I need to make this area look good on all tablets and mobile phones...
What CSS should I change/edit/remove/add?
Thanks!
Answers (4)
Romel Apuya answers:
that div has inline style width: 640px.
if you can add a class or an id to that div, then you can add to media query
@media (min-width: 320px) and (max-width:786px) {
.your-class{
width:100% !important;
}
}
king2244 comments:
Thanks for your help :) I was actually able to fix it immediately by removing some HTML I added.
Woops ;)
Chandra Babu M answers:
The div doesn't have any class now. If you can add a class add it and use the below css
@media (max-width:786px) {
.yourclass{
max-width:100%;
}
}
If you are specifying css inline use the below css
<div style="width: 640px; margin-left: auto; margin-right: auto; max-width: 100%;">
king2244 comments:
Thanks for your help :) I was actually able to fix it immediately by removing some HTML I added.
Woops ;)
Reigel Gallarde answers:
if you can change the source of it... I think you have in your dashboard edit post...
change width: 640px to max-width: 640px
king2244 comments:
Thanks for your help :) I was actually able to fix it immediately by removing some HTML I added.
Woops ;)
rochester answers:
Hi!
Actually you don't even need media queries for that. Probably under theme options you have a field for custom css (if you don't a plugin like this one should help: https://wordpress.org/plugins/simple-custom-css/ )
Add this code there:
.home #main-wrap div {
max-width: 100% ! important;
}
Kind Regards,
-Roch
king2244 comments:
Thanks for your help :) I was actually able to fix it immediately by removing some HTML I added.
Woops ;)