Disable/Fix Mobile theme
-
Greetings.
Spent the last five or so hours teaching myself CSS to build a relatively custom theme.
The code right now is pretty much a patchwork, trying to get different elements to show the way I want them to, because of the inability to customize HTML. Loads of position:absolute and z-index shenanigans.
The theme looks satisfactory on desktop mode. However, because of the above, it’s a mess on mobile. I was wondering if there is an easy way to fix this (I’m new to this so please keep that in mind during explanations), or at a minimum, a way to get the desktop mode to show on mobile devices. Alternatively, a link to some resources that may be of assistance would be appreciated.
Thank you in advance.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
To ensure your site adapts to mobile versions, use CSS media queries.
You can find more information here:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/In other words, you’ll need to add these type of CSS:
@media screen and (max-width: 800px) {
#site-header {
display: none;
}
}Replacing “#site-header” with the respective selectors. You can check the following website: http://www.websitedimensions.com/ to view what would be pixel sizes for the most common tablets and mobile phones.
-
@ihyaaltafkir, because of the way responsive themes such as Hemingway Rewritten work, position: absolute nearly always causes issues, and typically ends up requiring a plethora of Media Queries to adjust things so that it comes close to working.
If you can let me know what you are actually wanting to change/adjust, I’d be happy to take a look at things and see what I can do to accomplish that and retain the responsive operation of your site.
-
Thanks all for the help. I’m starting to get the hang of things, but I have a couple of remaining questions:
1. I’ve figured out how to tune the numbers separately for Desktop and Mobile mode thanks to @carladoria. However, I wasn’t able to figure out the specific min/max-width to build distinctive customizations for Tablet mode (it exists as some sort of in-between, that inherits the numbers from either the Desktop or Mobile mode). Is there a way to do this?
Specifically for my site: I want it so that the semi-circular header (site-branding) is correctly positioned, and not clipping for all screen sizes. Desktop and Mobile mode have it in the ideal position, but Tablet mode is messing it up.
2. An unrelated question while I’m at it: how do you edit the coloring of the drop down menu on Mobile/Tablet mode? What’s the CSS name for the element responsible for this? Currently the background-color for the drop down menu for the main nav-bar is a dark-gray, I want to customize it.
Thank you all in advance. Appreciate the help.
-
Just to update: I’ve figured that the issue was the weird parallax effect of Hemingway Rewritten. I switched to “The Gateway Theme” and the two issues described above have been solved. However one final problem has arisen and I apologize for being a nuisance.
That being; how do you edit the icons for “The Gateway Theme”. Specifically the light gray box with “comment, link, and edit buttons” below each post, as well as the hover effect for it. And the ribbons that exist to the left of the “Recent Posts” and “Categories” widgets. Not necessarily change the shape of any of those icons, but only the colors.
Thank you again.
-
Try this for the little ribbon. You can alter the color code for a color of your choice.
.widget_archive li:before, .widget_categories li:before, .widget_pages li:before, .widget_meta li:before, .widget_recent_comments li:before, .widget_recent_entries li:before, .widget_links li:before { color: #5FB299; } -
For the hover color effect on the “comment, link, and edit buttons”
.entry-footer .left i:hover { color: #5FB299; } -
-
-
-
-
- The topic ‘Disable/Fix Mobile theme’ is closed to new replies.
WordPress.com Forums 