Ask your WordPress questions! Pay money and get answers fast! (more info)

CSS Media Queries for Mobile & Tablet

  • 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)

2015-07-24

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 ;)

2015-07-24

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 ;)

2015-07-24

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 ;)

2015-07-24

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 ;)