My squiffy game is not responsive on Mobile.

When using desktop it's responsive but when I'm using mobile it is not responsive.
I'ts on desktop view on the first passages.

here's the link https://engame.000webhostapp.com/

how can I make this responsive on mobile? the text on mobile seems small and its on desktop view.


Getting HTML documents working well on both mobile and desktop can be a little tricky and a good understanding of HTML / CSS may be required in order to get good results. However, try adding the following to your HTML template (in the head section)

<meta name="viewport" content="width=device-width">

If you want to understand what this does, see: https://www.w3schools.com/css/css_rwd_viewport.asp

In many cases this will help get your Squiffy game looking much better on mobile - it might be worth the devs actually adding this by default.

The slight issue you might face is that looking at your code, you are not using responsive web-design standards, so even with the above tag you may still find it looks poor on mobile devices.

For example, you are displaying images using:

<img src='images/flowers-1.png'>

Really you should be using CSS to control how images display. For example, you may use something like:

<img class="standardpicture" src='images/flowers-1.png'>

In your CSS file you'd then have something like:

.standardpicture {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

This would apply some basic styling, but importantly make sure that the image does not exceed the width of the screen.

As it is, if the dimensions of the image exceed with dimensions of the phone, it will all look a bit horrible.

That's just one example, but hopefully you get the idea.


This topic is now closed. Topics are closed after 180 days of inactivity.

Support

Forums