Format difference for tablet and mobile
-
Hello!
1. Is there a way to ensure the desktop view is exactly the same on tablet / mobile? Specifically, I don’t want the sidebar to drop off when using a tablet /mobile
2. Also would like to have the title adjust according to the size of the screen (i.e. smaller for tablet/mobile)
Would love some assistance!
Thank you
The blog I need help with is: (visible only to logged in users)
-
Hi!
There’s no way to ensure they are exactly the same, across different devices, browsers or operating systems but in many cases you can get as close as makes no difference – the only problem I see here is that on small tablets and mobiles your content will be almost unreadable if you have it broken into two columns. It will be much better for your users to have the sidebar appear below the main content on these smaller devices.
To shrink your header (image height and font sizes) then try something like this and preview it on a smaller screen (or just resize your browser window on a laptop/desktop).
You’ll need to copy the code into the text box on the Appearance > Customize > CSS page to preview it. To make it permanent on your site you will need the custom design annual upgrade.
@media only screen and (max-width:800px) { .site-title a { font-size:18px!important; } .wf-active .site-description { font-size:12px; } .site-header-image { max-height:300px; } } -
Thank you halluke, always very helpful.
I have the design pack and becoming quite the expert with using the CSS! In response to your email I have a few queries:
1. What did you mean by “@media only screen and (max-width:800px)”
2. It’s important that the sidebar is visible as it has important information which needs to be seen immediately (i.e. speakers and sponsors of conference). People viewing the site should be able to zoom in and out etc, is there specific code that will allow for having the two columns visible no matter how small the screen?
3. On the mobile view the header image is almost entirely obscured by the title. Is there a way I can keep the title to say 20% of the header image?
Thank you in advance!
-
In addition, an example of a website I’m looking to replicate is: http://wcb2014.com/
When I type that into my mobile device it is identical to its desktop site. I can scroll and zoom as per normal.
This is my holy grail right now, hope you can help!
-
second addition: http://tailtrails.org/
this page also has the desktop view on the mobile view. -
Did you test out the code example I provided?
The media query part of the code targets the CSS only to certain screen sizes so you can make modifications for smartphones/tablets/regular screens separately so that viewers get a version of your page optimised for their device.
In short, no, there is no way to show two columns on a narrow smartphone screen (unless you want to make the text so small it becomes illegible). If the list of speakers is really important you might want to consider adding it to the main text of the page instead of the sidebar, which is usually used for additional information supporting the main content. Making people scroll around your site in 2 directions and have to worry about zooming in and out to read each part is likely to dissuade people from visiting again or reading other pages although if you really do want to serve the exact same layout to all devices you would be better off picking an older theme that is not responsive. I wouldn’t recommend doing so though.
The only way for the title to take up less space is to make the text smaller, the example code I posted before shows you how to do that for smaller screens.
If you don’t mind me asking, what are the reasons that you want the site to display really wide on small screens?
-
thank you halluke, I certainly tested the code and it is in effect. What it taught me was that I should be using the % rather than the px.
I’m not so concerned about people visiting the site so much. It is predominately an information dump. Registration information will come soon.
In answer to your question: My objective isn’t necessarily to have the display really wide. I just need to replicate the desktop and mobile sites so that it is similar to the two examples provided in this thread. My reasons are two-fold:
1. People will be viewing from a wide range of screen sizes, I want it to be identical even if it means sacrificing usability.
2. I’ve been set the task by somebody else that would prefer no other way.I will change theme if I must, it’s imperative I have the website viewing as per the two examples provided.
Looking forward to your reply. Thank you in advance.
-
Well that sounds crazy to me but if it’s a requirement then there’s no escaping it.
While I don’t think it is impossible to stop your theme from restructuring itself responsively with CSS it would be a lot of work. You are better off previewing some themes in the customizer and using the device icons to check that they look the same at different screen resolutions, best of luck!
-
Requirements are king!
Did you have a look at the two websites I suggested? I actually do think they are quite presentable.
1. Do you know for sure that you cannot stop it restructuring (you said “i think”) ? The second link is definitely a wordpress version: http://tailtrails.org/
Was this website made from a non responsive theme?2. There’s also another thread that I read that said:
“I figured it out. It was actually a matter of removing the header I uploaded with theme options and uploading it with wp core functions. Then I moved the nav bar in the header.php and after some tweaks with margins and padding – poof!”http://stackoverflow.com/questions/11674930/wordpress-how-to-resize-header-image-for-mobile
Can this be done on the theme I’m using? Hemingway Rewritten?
-
The WordPress.com site you linked to is using the Forever theme which has a fixed width. As I said before you can search in the theme showcase if you’re interested in swapping to a theme that will not change the layout for tablets and mobiles.
I don’t have the time to check everything about your site to see if the theme can be kept but the responsive layout can be stopped although I would assume it is possible (I don’t know that for a fact) but it would be quite a lot of work.
The response you found on StackOverflow is for self-hosted WordPress.org sites, here at WordPress.com we don’t have the facility to change the theme PHP files.
-
I took your advice and shifted to a fixed-width theme. It’s exactly what I was looking for. Thank you very much.
- The topic ‘Format difference for tablet and mobile’ is closed to new replies.
WordPress.com Forums 