Portfolio page problem

hezzipham · August 31, 2020, 9:10pm

I dont know why I have this body {overflow-x: hidden;}
but when I use my phone (both safari and chrome), the website still moving to the sides.
Also, I use bootstrap .image-fluid but the image still get long and weird when I check with my phone, however it is just fine when I resize chrome on my laptop.
Can someone help me fix this bug, I am just doing this for a friends, so it doesnt need to meet requirements for the CSS projects.
https://codepen.io/hezzipham/pen/oNxNYPO?editors=1100

PS: I am so sorry I use alot of bootstrap so the html look so confusing and I am still find a better way to organize it.

skaparate · September 1, 2020, 12:00am

Hello!

You’ve already fixed it, right?

hezzipham · September 1, 2020, 1:56am

No, I havent. It only has problem when I use my phone. I have iphone 8.
I dont know why but it seem ok on my laptop.
And this is the Github link to it:

github.com

Hezzipham/FCC-Project/blob/master/chienportfolio.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Domino Media - Chien Drone</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
  }

This file has been truncated. show original

skaparate · September 1, 2020, 2:14am

Which browser is having problems? I used Firefox and safari with an iphone 5s and it doesn’t have the problem.

This is usually a problem with how safari interprets the CSS, and the best way to solve it is using the developer tools (F12 on desktop browsers).

Since you’re on the phone, you need to connect from your mac safari to your iphone safari to edit the styles live (modify the rules to see what’s wrong and see what the browser actually computed).

hezzipham · September 1, 2020, 3:04am

I used safari and chrome, I even try with my ipad and the picture look like this: