Header Image not responsive viewing on mobile phone

Jeremy Monroe Posted in Technical Support 7 years ago

Is there any way to eliminate the header image when site is being viewed via a mobile phone? The current header image isn't responsive and neither is the text box that says Welcome to my site....

Replies
us Jeremy Monroe Replied 7 years ago

It's fixed. I removed the 475px to 100% and removed margin: 25px. That took care of the text box and centered it properly. The image is still disproportioned but I may just try using a different background image like maybe just a gradiant background or something instead of a vehicle for example.

us Jeremy Monroe Replied 7 years ago

Update...I think its because I added a gray box so the white text shows up better over the top of the background image. Let me past my css modded code

.home-left-contents .description {
font-size: 17px;
text-transform: uppercase;
font-weight: bold;
margin-top: 20px;
text-align: justify;
color:#fff;
width: 475px;
background-color: #999999;
border: 5px black;
padding: 10px;
margin: 25px;
}

I think the width: 475px; has to be the issue. I will change it to 100% and see what happens. My other 2 OSSN sites work fine but neither of them did I make the css changes like I did on this site.

us Jeremy Monroe Replied 7 years ago

Yeah. I think it's set to background-size: cover and that may be why. The text isn't responsive as the box extends to the right. Actually, let me correct myself, the background image is acting responsively but the dimensions of the image makes it appear squished. Example, a nice 4 door vehicle now appears to be 2 doors and about half the length of the original length of the vehicle.

So, it disproportioned and the text does not act responsively.

Indonesian Arsalan Shah Replied 7 years ago

You mean the background image? can u share screenshot ? the text should be responsive....