Streaming live at 10am (PST)

Need help on mobile layout


#1

Hi, i have a layout in desktop mode that i am trying to readjust to be mobile friendly. Basically the profile image and the ratings image are in a div element with Display Setting: inline-block, and float: left.
The rest of the info on the right is also in a div element with Display Setting: Block, and float: left.
Works fine in Desktop mode. However in mobile-portrait, i want it all centered. Any hwlp will be appreciated.

Thanks.

Desktop

Mobile


Here is my public share link: LINK
(how to access public share link)


#2

For this type of effect on mobile that you described make all the Divs holding the content 100% width and then go to the text area, and you should press the center text icon. If all your CSS classes were made based only on the holding Divs being aligned to the left this should work on mobile view. Hope this helps. :wink:


#3

Thanks. Almost worked. I also have the location, phone etc images in a div element, with Display: inline-block and float:left. Also the text next to their corresponding images have Display:Block and Float: left. Also in the same div.

The reviews image did center but not the profile image.


#4

Make sure the image itself is not fixed to the left but rather in a div that is fixed and the div's text is centered to the left. Then for mobile do the same thing for he reply above. Tell me if this helps. :wink:


#5

Thanks. You've been very helpful.


#6

Was you're problem solved? If so please mark the reply that solved your problem as the solution as to let the rest of the Webflow Forum know that we have found a solution to your problem. If you problem was not solved please contact me and I will be happy to help you further. Thanks! :wink::grinning::blush::+1:


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.