Trying to make Decode look the same on mobile

  • Resolved Scott Foshee

    (@scott-foshee)


    10 years, 3 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 https://lallabee.com/wordpress/

Viewing 4 replies - 1 through 4 (of 4 total)

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

    Thread Starter Scott Foshee

    (@scott-foshee)

    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.

    Thread Starter Scott Foshee

    (@scott-foshee)

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

    Thread Starter Scott Foshee

    (@scott-foshee)

    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;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trying to make Decode look the same on mobile’ is closed to new replies.