MrYawn

the html not the css, thanks

okay… can you copy and paste your whole page’s code please and I’ll amend and resend and you can see if that helps.

Make your divs fluid by using percentages width:100% (or whatever percentage you want). You can make CSS changes in media query too so when it is viewed on a mobile device it will change to the new CSS

@media only screen and (max-width: 481px)
{
#title
{
width:100%;
}
}

to make divs central use auto margin left and right:

#div
{
margin:0 auto;
}

to make images central use this and display block

#div img
{
margin:0 auto;
display:block;
}

You have a couple of empty divs, also you have two div ids with the same name which is invalid markup, the two are #featured-boxes if you want multiple divs with the same style use <div class="featured-boxes"> instead.

You need to change the max-width too.

@media only screen and (max-width: 481px)
.site-content {
width: 100%;
max-width: 90%;
}

as for the header, you need to remove the fixed with on the actual table, or use !important in your CSS

.site-header table
{
width:100% !important;
}

this is because your div css is:

.site-content
{
max-width:60%;
}

you need to change or overwrite this. you can perform media query (change device width to suited devices:

@media only screen and (max-width: 481px)
{
.site-content
{
width:100%;
}
}

if you could send a link to your site I can take a look. You can just use CSS in the same query and ensure your divs are fluid i.e.

#div
{
width:100%;
max-width:960px;
}

add it to the bottom, make sure you close the query though:

@media screen and (min-width: 600px) {

.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}

}

if you are able to scroll left and right on mobiles there will be a div that is exceeding the width, if you’re struggling to locate and change it you can workaround it by adding overflow-x:hidden; to your wrapper div but best to make sure all your divs are fluid.

Hi nanotube,

Use media queries to alter CSS in mobile devices

@media only screen and (max-width: 481px)
{
#div
{
width:100%;
etc etc
}
}

You can use margin or padding

#div
{
margin-bottom:10px;
}

if you could supply a link to your site and direction to your issue that would help

Hi Res2,

Don’t know if this will help. You could create a child theme and add this to your template:
<h2 class="h2 entry-title"><span><?php echo get_the_title(); ?>/span></h2>

@jan Cavan Boulas is right, that would be better as less html markup, adding the code I posted earlier will take your images out of p tags then reference @jan Cavan Boulas’ solution to styling

yes it is .menu-toggle try the code above

from what I’m guessing is the menu you’re trying to hide, in your css write:

@media only screen and (max-width: 767px)
{
.menu-toggle {
display:none !important;
}
}

Hi sprang,

Tried using CSS in media query?

@media only screen and (max-width: 481px)
{
#primary-nav, .menu
{
display:none;
}
}