RapidTransit22
Posts: 7
Joined: Fri Feb 14, 2020 2:30 am

What can I do to make my website more mobile friendly?

Fri Feb 14, 2020 6:58 pm

Hi all. I am currently working on a website and just hosted it with a webhosting platform called Heroku. I opened it up on my phone and it looks pretty horrid, however I am unsure of what changes to the css I should make. I think that the text simply takes up way too much space, while the maps area of the screen is too small, making the user experience worse. I have linked the website below if you would like to visit it and give me some feedback. (You can use inspect element to view the code) View Code With Inspect: https://asteroidcollision.herokuapp.com/ I think one solution is to make the text be at the top of the screen, does anyone mind providing some code examples including CSS that will inspire/show me how to do this?

If you do not wish to visit the website and you'd rather view an image and give me feedback. I have also included that..

Thanks for the help.. cheers :mrgreen:
Attachments
asteroidwebsite.png
image of website for those who do not want to click on link
asteroidwebsite.png (175.63 KiB) Viewed 398 times

Heater
Posts: 14687
Joined: Tue Jul 17, 2012 3:02 pm

Re: What can I do to make my website more mobile friendly?

Sat Feb 15, 2020 2:09 pm

Use bootstrap: https://getbootstrap.com

Bootstrap is a CSS "component" library. The most important part of bootstrap for you is that it makes it easy to create fluid layouts that can rearrange themselves to fit nicely on different sized screens.

Basically you define a bunch of columns in your page. Any column can be of different widths as expressed as 1/12 the width of the screen. You can specify different arrangements of columns and rows on the page for different sized screens. Bootstrap will rearrange the page to fit the screen according to your specifications.

In your page you might have two columns in one row on a big screen, text on the right map on the left. But for a small screen it would rearrange to two rows of one column, text the top, map at the bottom. Or whatever you like!

Here is a great tutorial on bootstrap: https://www.tutorialrepublic.com/twitte ... -tutorial/ See escpecially the section on "responsive" layout: https://www.tutorialrepublic.com/twitte ... layout.php

I hate messing around with CSS so bootstrap saves a lot of trouble.
Last edited by Heater on Sun Feb 16, 2020 7:05 pm, edited 1 time in total.
Memory in C++ is a leaky abstraction .


Heater
Posts: 14687
Joined: Tue Jul 17, 2012 3:02 pm

Re: What can I do to make my website more mobile friendly?

Mon Feb 17, 2020 9:10 am

Great. Do let us know how you get on with it.
Memory in C++ is a leaky abstraction .

Return to “Other programming languages”