I have a problem with responsive design for mobile , its render well using the pc desktop browser but using my iphone it renders completely different the background above with the logo , i saw that the logo still there but seems hidden i dont know, how to fix it its not like its shown on pinegrow
Hi @HerrscherOfReason,
It is a little hard to tell without any code to look at, but it seems that your image is not responsive. On the small display it is still very large. Not sure how you placed the logo. You will have to work on making the image responsive. If you could let us know how you placed the logo, it might be helpful.
Cheers,
Bob
Hi @HerrscherOfReason,
Thanks for the file. I’m assuming all of the styling is inline. So far, I’m a little confused with where the logo is disappearing to on the page. In the file you gave me, the logo is at the top. Do you have any other styling on it?
For the image you should add the background-size property to have it resize with your page. Here is a link to read about it: background-size - CSS: Cascading Style Sheets | MDN
Cheers,
Bob
Hi @HerrscherOfReason,
Thanks for the files. I’m not sure I can quite replicate what you are seeing. I think the problem is two-fold. One, you are setting the height of the first div as a percentage - this is likely going to make it act oddly depending on content. Second, you are positioning the logo with a margin-top, which can impact the flow of other elements on the page. Maybe try setting it as an absolute.
Cheers,
Bob
I use https://responsively.app
It emulates all windows, IOS, OSX and Android screens