on my website wordpress + theme twenty-twenty-two, I've a large table on a page that shows the schedule and prices.
It's unreadable on mobile phone because the size of the screen it show only the first 2-3 column. on computer it's ok.
The theme twenty-twenty-two is responsive.
What can you advise to make this table more comfortable on smartphones?
Here is the url (access it with mobile phone to reproduce the issue): https://axelingo.com/horaires-cours-anglais/
thanks!
Ok I found some wp plugins to do that easily. wp table builder fr example as an option for responsive. This build the raw vertically basically when on mobile phone.
Related
I created a page in html page from my PC here is the link http://evaluations.tk/.
My question is do I have create separate page for both mobile and pc, if I have to create separate page then how can I set different previews for pc and phone. For testing I added meta tag but when I see that page on phone it make the objects very large. Can anyone help me...
No need to change in program.but you need to apply bootstrap css to all pages.
Bootstrap basically does is adjust the size of page as per the size of the screen..
Thanks Vote :P
Like Yogesh Suthar's answer; bootstrap is your friend when dealing with responsiveness of your websites. By the use of the column grid structure, you can make your site responsive to different screen sizes. If you would like to have some more customisation, you can also create bootstrap-like behaviour with css by employing media queries (e.g. #media screen and (min-width: 400px){color: red;}). Basically, you define the layout for mobile first and then gradually add styling for larger screen sizes.
for my web application using AngularJs and Bootstrap as a web framework.
I'm implementing a table for insertion of working hours, overtime, travel expenses, repayments etc ..
The table is currently composed of 6 columns collapsible in 5.
Here are two screenshots with the desktop version:
These however are 2 screenshots mobile version on Nexus 5:
The visualization on the mobile version is clearly very bad. Plus it must consider that the user, in this version, should scroll sideways on each line. Which makes the application a non-friendly application.
The question is: How to make a table of this type in such a way that in both versions, the visualization is clear, clean and friendly?
I have a website which is working well on PC. Now I want it can be displayed on mobile phone like following:
Align left and display only 1024px from left.
The rest part:
1) The rest part can be kept and user just only need to drag to see the content. This will be the best, and if this happen, it is only need to do some zoom in and out work. But I found it is really difficult to make it working properly on all mobile web browsers.
2) Do not display the rest of part. This is also an acceptable option.
Thank you very much if you can give any advice.
Sure you can do almost whatever you want if you adjust your website to be responsive to different screen sizes and user agents. Media queries will help you adapt your website greatly to different screen sizes, media types and orientation
I would highly recommend converting your website in to using Bootstrap. It makes it responsive, so you should not have any trouble with the mobile view at any point.
From the developers view the Bootstrap offers many and much more to the website creation. No need to hazzle around with the percentages or make entire new pages for mobile phones, one page does it all.
Used foundation for the first time as i thought it was an easy way to make a responsive site for all resolutions.
Not responsive at all. I would not say i am knowledgeable regarding web design but i understand how things work.
The site works down to an ipad and looks great however on the smart phone it falls to pieces, background image does not fill screen and nav menu is split onto two lines.
Any advice?
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.