The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Jul 31 2018, 09:29 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,095
Joined: 9-August 06
Member No.: 6



I've never sold anything at eBay, so I don't know anything about the setup. But my guess is you should keep things as simple as possible. Your HTML will be an integrated part of the eBay page. Their HTML and CSS may impact your stuff. And if they change something that may upset your stuff too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pearlcustoms
post Aug 1 2018, 01:09 PM
Post #3





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



QUOTE(pandy @ Jul 31 2018, 07:29 PM) *

I've never sold anything at eBay, so I don't know anything about the setup. But my guess is you should keep things as simple as possible. Your HTML will be an integrated part of the eBay page. Their HTML and CSS may impact your stuff. And if they change something that may upset your stuff too.


Thank you. Yes I think at least for question 3 I can just delete the images that are out of alignment and make a third row. For question 1, it seems that the borders don't quite fit me phone, but they do fit on an iPhone 6s Plus and on the eBay mobile checker. And for question 2 I may just need to make the image smaller for desktop and mobile. If anyone has any other suggestions, though, I'm all ears. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pearlcustoms
post Aug 1 2018, 03:00 PM
Post #4





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

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: 14th December 2018 - 04:11 PM