Issues with mobile view

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Acknowledged
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

Can I give an example, I'm having the same problem, looks great on desktop and iPad, but terrible on cell phone.  I have a few pages set up, each page contains pictures and descriptions of the items on the page.  At the left margin is the text box/description and to the right is the image.  Looking at the page on desktop and iPad, the text boxes are neatly aligned down the left margin, and the pictures are properly aligned to the right of their descriptions.  But on the cell, the text boxes print first (in a column that spans the entire width of the phone screen) and the pictures are in a column underneath the texts.  I see that in mobile "view" on website builder, I can edit text and images, but don't see any way to increase the width of the page which, in mobile view, is half the width that it is in the regular/normal view.   Any way to correct this?  Thanks so much.

Note: This conversation was created from a reply on: why in my cell phone show different my home page that in my computer?.
Photo of Laura4586

Laura4586

  • 200 Points 100 badge 2x thumb

Posted 3 years ago

  • 0
  • 1
Photo of Drew N

Drew N, Alum

  • 262,826 Points 100k badge 2x thumb
Which site are you working on?
Photo of Laura4586

Laura4586

  • 200 Points 100 badge 2x thumb
Hi Drew, the URL is http://hri2017auction.homesteadcloud.com/pg-1 and I'm using WebsiteBuilder on a Mac.  After I asked my question, it occurred to me that I may be thinking backwards; rather than trying to increase page width in mobile view (so it’s the same width as it is in desktop view), I’m supposed to reduce text and images until they appear in mobile view as I want them to look on a cell phone....if that makes sense.  This website is for a charity auction and people accessing it on their phones are going to have a difficult time matching up the pictures with the descriptions so they can see what they're bidding on ...
(Edited)
Photo of Laura4586

Laura4586

  • 200 Points 100 badge 2x thumb
Ah!  Just held my phone sideways (landscape) and it looks even better LOL  Except the items with longer descriptions have the pictures aligned with the bottom of the text boxes instead of at the top ...
Photo of Drew N

Drew N, Alum

  • 262,826 Points 100k badge 2x thumb
No problem. I am trying to get some time to try some things, but if you want to play with it, you may be able to add a container and place the text box and image within the container. It might help even out the display in the mobile version, but that does work best when the descriptions are close in length. If you get that to work, you might even use a tabbed element instead of 1 image, you could add multiple. The visitor would have to scroll through each one, but at least you could try multiple images.
Photo of Laura4586

Laura4586

  • 200 Points 100 badge 2x thumb
Been working on it for hours and was able to figure out how to get the pictures to align at top of the text boxes.  Got my nav bar working correctly.  I was in the middle of working on line spacing between the text boxes (some are evenly spaced and some have huge gaps) and thought I had it working but just got kicked off due to a temporary server issue message.  Just as well, I need a break LOL  
Photo of Laura4586

Laura4586

  • 200 Points 100 badge 2x thumb
oh, thanks for the suggestion about containers, but it does look cleaner with just one pic and I need to get the basic layout cleaned up first : )  trying to get this done before donors begin sending me more items to add to the website!LOL  
Photo of Drew N

Drew N, Alum

  • 262,826 Points 100k badge 2x thumb
Ok. Good luck. I will keep playing around as time permits, but if you are on a decent track and have a time limitation, then best to press on. Enjoy your break.

This conversation is no longer open for comments or replies.