WordPress.org

Forums

Decode
[resolved] Trying to make Decode look the same on mobile (5 posts)

  1. Scott Foshee
    Member
    Posted 8 months ago #

    I am trying to make the Decode theme look the same on mobile as it does on the laptop. So far the code I have (below), when posted in CSS Stylesheet editor, yields a blank phone screen. How can I make it appear the same as it does on the laptop? Thank you for any help you have.

    @media only screen and (max-width: 480px) {
    	#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
    		width: 400px;
    	}
    
    	#container {
    		width: 100%;
    	}
    
    	#branding img {
    		width: 100%;
    	}
    
    	#site-description {
    		float: left;
    	}
    
    	#access {
    		width: 100%;
    	}
    
    	#content {
    		width: 100%;
    	}
    
    	.hentry {
    		margin-left: -13px;
    	}
    
    	#primary {
    		display: none;
    	}
    
    	#footer {
    		width: 100%;
    	}
    
    	#site-generator {
    		float: left;
    		margin-top: 5px;
    	}
    }

    The site is http://lallabee.com/wordpress/

  2. stephencottontail
    Member
    Posted 8 months ago #

    You have

    #primary {
    display: none;
    }

    That's what's hiding the entire content of your site. Removing that line will fix your issue.

    May I ask what exactly you're trying to accomplish, though? When I look at Decode on my phone, it looks the same as it does on my laptop without having to change anything.

  3. Scott Foshee
    Member
    Posted 8 months ago #

    Thank you. They want mobile to look EXACTLY like the standard site. No scrolling, no optimization. I'm trying to do that, but it is proving difficult. I think Decode is mobile optimized, so I'm trying to figure out a way around that.

  4. Scott Foshee
    Member
    Posted 8 months ago #

    Thanks. The change above did put the site on the screen, but my code didn't work.

  5. Scott Foshee
    Member
    Posted 8 months ago #

    Stephen was a great help getting the issue resolved. I hope it helps someone else out there. I'm in WordPress Decode theme. This floats the bottom custom menu at the bottom (in the footer), turns its background white, and sets padding so the page text scrolls above it without going behind it. I set the height at 57 so mu menu buttons would show in mobile.

    body {
        overflow: scroll;
    }
    
    #colophon {
        background: white;
        bottom: 0;
        font-size: 13px;
        height: 57px;
        position: fixed;
        padding: 0 30px;
        margin-bottom: 0;
        width: 100%;
    }
    
    .entry-content {
        padding-bottom: 30px;
    }

Reply

You must log in to post.

About this Theme

About this Topic