- This topic has 3 replies, 2 voices, and was last updated 6 years, 3 months ago by Leon.
-
AuthorPosts
-
December 8, 2017 at 9:52 am #444976Leon
Hi Tom,
I’m pretty happy with my laptop layout for my home page.
However, on mobile, since it’s responsive, the home page becomes very long vertically and it’s not so easy to view content. I’m wondering if there is a way to make some part scroll horizontally instead of displaying them in a vertical order.
In general: I want to make my homepage shorter on mobile. I’ve summarized my thoughts with the below pic. I hope you can read it. 🙂
If you could help give my website a visit both on desktop and mobile: https://interpreterdatabase.com, you may understand my problem better. (I apologize for making it difficult. I still need to learn about Photoshop)
Before asking you, I’ve tried css: overflow-x:auto; for that second column. But it works if there is only one table in the div. But as of now, since there are three pictures, it’ll not show a horizontal scroll bar, instead, the pictures will display vertically.
Thank you in advance.
Best regards
LeonDecember 8, 2017 at 9:58 am #444981LeonThi is the code Im using for the first section: The short codes that begin with [su] are by Shortcodes Ultimate plugin that does pretty similar thing as you have with Lightweight Grid Columns I guess.
[su_row] [su_column size="1/4"] <h1 style="text-align: center; color: white;"><strong>Chinese interpreter China translator.</strong></h1> [/su_column] [su_column size="1/2"] <div style="overflow-x: auto;"> <div style="float: left; margin-right: 15px; text-align: center;"> <a href="https://player.vimeo.com/video/228325811" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="400" data-featherlight-iframe-height="500"><img class="aligncenter wp-image-2483" src="http://interpreterdatabase.com/wp-content/uploads/2017/08/Jayson-Testimonial-on-Interpreter-Leon.jpg" alt="" width="175" height="227" /></a> <span style="color: #ffffff;"><a style="color: #ffffff;" href="http://interpreterdatabase.com/profile/7">Leon</a></span> </div> <div style="text-align: center; float: left; margin-right: 15px;"> <a href="https://player.vimeo.com/video/228325690" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="400" data-featherlight-iframe-height="500"><img class="aligncenter wp-image-2485" src="http://interpreterdatabase.com/wp-content/uploads/2017/08/Testimonial-on-Interpreter-Lucy-Lan.jpg" alt="" width="175" height="227" /></a> <p style="text-align: center;"><span style="color: #ffffff;"><a style="color: #ffffff;" href="http://interpreterdatabase.com/profile/164">Lucy</a></span></p> </div> <div style="text-align: center; float: left; margin-right: 15px;"> <a href="https://player.vimeo.com/video/228323945" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="400" data-featherlight-iframe-height="500"><img class="aligncenter wp-image-2484" src="http://interpreterdatabase.com/wp-content/uploads/2017/08/Testimonial-on-Interpreter-Christin.jpg" alt="" width="175" height="227" /></a> <p style="text-align: center;"><span style="color: #ffffff;"><a style="color: #ffffff;" href="http://interpreterdatabase.com/profile/367">Christin</a></span></p> </div> </div> [/su_column] [su_column size="1/4"] [upme_search show_combined_search=no filters=language,familiar_industries,city_live_in use_in_sidebar=yes] [/su_column] [/su_row]
December 8, 2017 at 7:46 pm #445298TomLead DeveloperLead DeveloperI’m not sure most users would think to scroll horizontally. People are pretty used to scrolling vertically, even if the page is long.
Alternatively, you could look into a carousel plugin.
December 9, 2017 at 2:52 am #445486LeonHi Tom,
I guess you are right. I’ll stick with it as of now.
Thanks
Leon -
AuthorPosts
- You must be logged in to reply to this topic.