AWS S3 Responsive website deployment breaks CSS

Question

I have a static website that uses flexbox to make it responsive. I have tested locally both on my desktop resizing the browser as well as locally on my iPhone and iPad. Everything works great, however, when deploying to S3, the website works on my browser but not on my iPhone / iPad.

I have added the:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

with no success. Upon looking that the HTML, it seems that AWS is wrapping my code inside its own html and frameset elements. The structure then becomes:

html
  head element added by AWS
    meta elements added by AWS
  frameset element added by AWS
    frame element added by AWS
      #document element added by AWS
        my code

How can I go about this? The website looks just fine in my browser. I have also tried using javascript to add the viewport metatag dynamically but it does not work. Deploying on heroku works just fine.

Answer 1

you can check the s3 deployed website errors by going to inspect element in your browser. Some of your files must be blocked by aws with 403 Forbidden error.

To avoid that, you can use several methods.

1. Connect your S3 to a AWS CloudFront. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/MigrateS3ToCloudFront.html

2. Change the bucket policy, you can refer the given URL or the policy given below. http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

For more information check this stackoverflow question