The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> More adjusting HTML of Ebay store to be mobile friendly - first steps improved mobile but borders too thick, 1 photo squished, 2 photos out alignment, Mobile HTML
pearlcustoms
post Jul 31 2018, 05:22 AM
Post #1





Group: Members
Posts: 3
Joined: 31-July 18
Member No.: 26,681



Dear HTML help forum,

I am here to ask a few questions about what needs to be changed in my HTML markup for my eBay store to be more mobile friendly. I have already started taking some steps and still have some specific questions about content that is not adjusting properly to mobile from within the eBay app on android and iPhone. I am a huge newb to any kind of HTML, CSS or anything else related, so I have been following simple instructions from a few different websites that help with this topic. I will list a link to the desktop website, a link to screenshots of the desktop website and mobile website from within the eBay app from android, my questions, and the steps I have already taken.

This is the webpage I've used to test the HTML formatting: https://www.ebay.com/itm/163162615054. For me, it works on desktop from a mac in Chrome, Firefox, and Safari.

These are the screenshots: https://imgur.com/a/c9UfGhx.

1. Can I force the border to resize itself to the constraints of the mobile device?
2. Why is my logo image squished? What can I do to get it to resize properly?
3. Why are my "Blush" and "More" images out of alignment on mobile only?

So far I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width: 100%;
height: auto;
}
</style>

I do not know where to start with questions 1 and 2. For question 3, I have tried to find the HTML formatting that is different for those images and deleting it but to no avail.

Thank you for taking the time to read my submission. I appreciate any feedback.
Thank you,
Vanessa
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
pearlcustoms
post Aug 1 2018, 03:00 PM
Post #2





Group: Members
Posts: 3
Joined: 31-July 18
Member No.: 26,681



I would like to update that I have made the logo and "Explore The Shop" images smaller on desktop which solved that problem. For the 2 rows of 4 images, I changed it to 3 rows of 3 images which solved that problem.

The only thing that I haven't figured out is that the borders don't resize completely on every phone. They still resize but there is a tiny bit of horizontal scrolling to see all of the border, but you don't have to scroll to see the images and descriptions and all. It would be optimal if I could fix this border issue, but I realize that I may not be able to perfect it on every phone, especially since it's within eBay's parameters as another user pointed out.

Thanks,
Vanessa
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th April 2024 - 01:04 PM