Robolisk Robolisk - 6 months ago 11
HTML Question

cut off about 20px on both side - mobile website

http://juniorgoldreport.com/ is the website I'm working on. It's made in wordpress. I'm making it mobile friendly by doing all my changes with

@media only screen and (max-device-width: 480px) {


I'm viewing all my changes via chromes inspect element on a desktop, and then using the mobile view.

When you take a look at the website, there's extra space on the right and left, maybe like 20/30px's. I'd want to cut that extra space out so it more zoomed in, that the articles are taking up the whole screen (maybe 2px away from both sides of the screen).

I'm not sure what I need to change to make this happen. I've been screwing around with so many elements but I can't find one that does any sort of direct change to website's sizing.

example images:

This is how it is now
current mobile website

this is what I'm trying to do:

enter image description here

Answer

It seems like your .entry-content element has a max-width set at 604px. Try removing this line :

    max-width: 604px;

From here :

@media (max-width: 999px){
    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta, .sidebar .comment-list, .sidebar .comment-reply-title, .sidebar .comment-navigation, .sidebar .comment-respond .comment-form, .sidebar .featured-gallery, .sidebar .post-navigation .nav-links, .author.sidebar .author-info {
        padding-left: 0;
        padding-right: 0;
    }
}
Comments