Web page displays improperly on phones

With some help from a couple of patient folks here, I feel like I have the bulk of the bugs worked out on the webpages I’ve built. However, I need some guidance on what I need to do in order to get the pages to display properly on a smartphone. All I get is the words, one at a time, in a single vertical column and you can see a bit of the background image color on side.

www.trainwithpurpose.great-site.net

I have this for responsive layout and I can see that it does work by simply making my browser small on a desktop. But it’s not helping any with a phone.

Is there a guide, or anything available for this?

Can use xara web design software:

Thanks, I’ll check it out. I’d prefer to learn to write the code myself if I can. But I’ll certainly take a look at what they offer.

1 Like

Hello!

What framework are you using? (Bootstrap, Halfmoon, etc)

2 Likes

To be completely honest I’m not sure. I’d think it likely to be Bootstrap. I simply learned how to create the layout I wanted using examples and did a bunch of tutorials at W3 schools. I’m not currently using style sheets but it’s on my to do list. I feel like once I get this setup, it will only require changing content for the most part. I want to get some videos done and add a forum yet as well. But I feel like it’s necessary for all this to work on a smartphone and tables as well as a PC.

Try using Bootstrap columns

And this article is also related:

4 Likes

Great, thanks! I’ll certainly dig into these and see what I can’t figure out. I just hope I don’t have to do a lot of major modifications to the work I’ve done so far.
Thanks again!

Your site right now seems to be completely custom coded and not using any framework. While this is a great way to learn about web development, making a design responsive that was built for desktop only is not easy.

You can stick to fully custom built and use CSS media queries or use more modern features like Flexbox. But even then it’s still quite a lot of work and may involve rewriting a lot of your code.

This is why CSS frameworks are so popular, they define many handy classes that have all the right attributes set up to handle the responsive design.

3 Likes

Thanks for that information. While I’ve worked in IT for many years, I’ve done very little with HTML or creating websites. It’s a lot to absorb. Yet I think it will be worth the effort to make sure the website works on mobile platforms. I just saw a statistic the other day that said 2016 mobile users outpaced desktop users on website access.

If you looked at my website, you probably figured out that I’ll eventually be looking for local participants to train, folks that are withing a reasonable travel distance. But I also hope to impact others who are like minded.

I’m no spring chicken, and the learning curve is in insubstantial. But I will persevere. I find that despite the occasional frustration, I rather enjoy challenge.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.