Cropped at Smartphone ( Website )

patkok

Hi everyone,

May I know how to do the css? Because my website in smartphone was cropped on side.

Attached are the photos reference
Smartphone :
Laptop :

Hope to hear from you all soon.

Regards,
Patrick

Allen

I'd check layout tab and see if you have set a fixed width to the page. It might not resize correctly if so.

patkok

Hi @Allen,

My html is this actually. Is there anything that I need to take note for the changes.

I did try to set to fixed but not changes effect.

/CSS to modify the appearance of the TITLE text/
h5 {
color: #fff;
margin: 0;
width: 20vh;
text-align: center;
font-size: 10px;
font-weight: 60;
letter-spacing: 10px;
font-family: Microsoft Himalaya !important;
}

/CSS to modify the appearance of the button/
a {
border: 1 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 0px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
color: #fff;
font-size: 10px;
padding:5px;
}

/CSS to modify the appearance of the button after a cursor have been hovered over it/
a:hover {
border: 0px solid;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 1px;
text-shadow: 1px 1px 1px #427388;
}

/CSS to modify the appearance of the background of the image/
.hero {
background: white;
background-image: url("https://photos.smugmug.com/Prints/i-xDWqLhQ/0/060b3c7f/X5/Malaysia Newborn Baby Portrait - Print 1-X5.jpg"); /Replace link to the background image with your own image/
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 65vh;
width : fixed;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

Hope to hear from you again.

Hikin' Mike

Why are you using that code (.hero) when all you need is a single photo block?

patkok

@Hikin' Mike I also don't know why I use hero. I copy paste only. Do you have other code suggestion?

Thank you very much.

Hikin' Mike

I already said to use a single photo block. I don't know what the purpose of using the hero CSS is.

patkok

Noted @Hikin' Mike

The reason I do not want to use single block cause user can right click save image. Do you get it?

Thanks

Hikin' Mike

I can download that "hero" photo, so right-click protection is worthless. If you post an image online, it can be taken/stolen...period.