Website to fit any phone screen
-
Hi, I’m using the theme Penscratch and I have 2 columns on the site. But only one column shows on the phone screen. How do I make it so both columns show on the phone as it does on the computer?
The blog I need help with is: (visible only to logged in users)
-
The Penscratch theme has what is called a responsive design. That means it adapts to a small screen size, such as a phone, and still keeps the text readable. On a phone, the sidebar is still there, but it is moved to below the posts area. This is by design, and I wouldn’t recommend changing it.
-
Ok I understand that, but is there a way to still have both columns on the phone? It’s just my preference and its better accessible to my readers. If there’s a way to do that I would like to.
-
Both columns are there on the phone, the sidebar just moves to the bottom. To make the sidebar easier to find on mobile, one thing you could do is add more tags to your content so that just the first part of the post shows on the home page. That way, viewers could get to the sidebar content more quickly and easily.
-
I get what you’re saying but I don’t think you understand what I’m really asking. I don’t want the sidebar at the bottom of the page. I want it exactly as it appears on the computer screen. I have another blog bundleofsweetness.com that appears exactly as both on computer and phone – side bar at the side and not on the bottom. All I want to know is if there’s a way to do the same for this theme, whether via css or whatever else? If not then I’ll change to a theme that does.
-
What you are asking to do is remove the responsive design that is built in to a theme. That is possible, but not recommended. While I can give you some general direction to learn how to do something like that on your own, it is an advanced update and you will need to work out the details and test everything on your own.
The general steps would be:
1. Switch to the “Don’t use the theme’s original CSS” option in the Appearance > Customize > CSS panel
2. Copy the entire theme’s CSS but remove all “@media” blocks
3. Update any instances of url() values to be relative URLs instead of absolute URLs
4. Add back any custom CSS you were using before either at the end of the other CSS or by adjusting the existing CSS as needed
5. Check all types of pages on as many devices and browsers you can to make sure nothing is broken as a result of your changesPenscratch’s CSS can be found at https://s0.wp.com/wp-content/themes/pub/penscratch/style.css?minify=false
I really wouldn’t recommend changing a theme’s entire responsive design setup unless you are advanced with CSS and willing to work out all the bugs that could result after a change like that on your own. Most people who try it, even advanced users, can run into problems with it. A change like that may also override other features such as custom colors and fonts—those details would need to be worked out individually by you as they come up now and in the future. Making a large design change like this is outside the scope of support we provide in this forum. Sorry I don’t have a more simple solution for you! It is not a simple change to make. I would recommend keeping the responsive design and making small adjustments like using the more tag.
You could switch to another theme, however, it would probably have to be a very old theme because most new themes have responsive designs because they are built specifically with readability for mobile in mind. Twenty Ten comes to mind. It is not a theme made with responsive design.
-
Ok, thank you very much for the detailed explanation. I appreciate it. I’ll check out Twenty Ten.
- The topic ‘Website to fit any phone screen’ is closed to new replies.
WordPress.com Forums 