Web page is cut off on mobile but looks good on desktop please help

Community support
#1

When I access my web page it is complete on my desktop. When I access it from my mobile it is cut off and does not display correctly?

#2

Hi @musclemaxx!

What is the website URL?

#3

www.musclemaxx.ca is the webpage

#4

I have added some meta tags to your index file.

Please reload the webpage on mobile.

#5

I just reloaded on mobile and the right side is still cut off and when the mobile rotates it is completely cut off. Before the migration it always loaded on both mobile and desktop just fine?

#6

The migration is not relevant.

000webhost does not modify your CSS style.

#7

can you think of any reason why it is not able to display on mobile devices properly

#8

The website displays like this because:

  1. Your entire banner is an image

  2. Your image is hilarious size

  3. On old cPanel your website was just displaying the image, however a few weeks ago you came by and asked for an implementation for your website. Therefore I have incorporated the image in a index file with proper CSS to fit the desktop screen.

How should it display on mobile? Because of image size, it’s almost impossible for mobile to contain it in width …

#9

If you can provide me with a correct size, I can change it in order to accommodate mobile devices

#10

By size I mean dimensions… 2,270px × 1,150px

#11

I can adjust pixels size. Please provide correct dimensions for it to work on both mobile and desk top

#12

I am not sure if this is possible…

What matters here is the width of the image.

  1. Mobile devices have a height bigger than width, therefore resizing the width will not change much things: the image will look the same.

  2. If we resize the image, it will not look good on desktops anymore, as it will loose its quality …

#13

@Infinity @sulliops @akhilkumar332 Do you have any ideas, or a fix maybe (in CSS)?

#14

try this
body{
width: 100%;
height: 100%;
background-image:url(img.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}

#15

Loads fine on Windows 10, Chrome & Nexus 6P Android 7 on Chrome too.

#16

I’m having the same issue
I use Mobirise software to creat my site.
www. jmfcontab . com.br

This is the link

What can I do?

#17

@filoh123 Some themes are compatible with desktop not with smart phones.
We can’t help you much in this.