Converting Desktop into Mobile

Hi

I am trying to figure out how to make the desktop and mobile more cohesive. Whenever I go to the website on the phone everything is pushed to one side and everything is off. I have been adding stuff after the initial website was built but havent been messing with padding, borders, etc.

For some reason its not converting over.

I have all mobile and tablet versions activated as well.

Thanks!
Luke

1 Like

Hey @joseph77 would you mind sharing a link so we can maybe give you a few tips? Would be very hard to guide you with no website to review.

2 Likes

Also, please include screenshots or images of your designs so we have a target to hit.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

@tim and @thewonglv here is a link to the website http://www.dthydro.com/

Hello @joseph77,

looks like there is few elements on the site, that has big negative margins

More details will be hard to see without read only link to your project

Cheers,
Anna

https://preview.webflow.com/preview/dthydro?preview=3ee4ee72a2ec2fa2b55198456a1de406

Thanks!

Hi again, Joseph.

Your site is great and has fresh style, you did great job,
About the issues, I think I know where is the reason.

There is classes/subclasses “mobile” and “tablet”, which, I believe, was created like a try to make site responsive. But, unfortunately, that classes does opposite effect because of big negative margins (which push content to the side)

But really there is no needs in these classes. Webflow already takes care about breakpoints and different views for tablets and mobiles.

For every element, in different views you can change size, padding, margins, styles etc and it will be saved by Webflow. It using cascading styles system. In short words: all changes made on desktop view effect tablets+mobile, then you make changes on tablet view and it effect mobile, but NOT effect desktop, then you go to mobile view and make changes (if it is needed) and it is NOT effect tablet and desktop. More you can learn from Webflow tutorial course http://tutorials.webflow.com.
I think this video will be helpful too. It is video how to build a website in Webflow from scratch ALL THE WAY THROUGH: https://www.youtube.com/watch?v=APiSNBkyD5Y

So for now, you could:

  1. get raid of classes “mobile” and “tablet”
  2. check rows on tablet and mobile views
  3. check font size for tablet and mobile views in Headers
  4. yet, I would recommend change or resize Brands Photo, it is definitely too big for mobile
  5. last tip, on tablet and mobile views you can use % or VW in some elements width, it will make them responsive to different phone and tablet models.

Try it and if you need any help or advice along the way, please don’t hesitate to post a detailed inquiry. Look forward to seeing all of your progress!! Don’t give up - with practice and some patience you’ll have a solid responsive website !

Good luck,
Anna

Great! thank you @sabanna im going to make these changes and will post an updated link soon.

What size would you recommend changing the brand photo to?

1 Like

Hi @sabanna so as I was going through and trying to delete all the classes that said “mobile” Some of paragraphs did not shift into the center. Are there any other classes that I need to delete that could possibly be throwing it off?

Below is an updated link.

https://preview.webflow.com/preview/dthydro?preview=3ee4ee72a2ec2fa2b55198456a1de406

About Brands Photo:
I would make 2 square images instead of 1 wide. Size about 500x500 px every. Then put them inside the row with 2 equal columns and style their width= 100%, height=auto. In this way images will be responsive to any desktop size. And on Tablet and Phone views they will stand one on another and will not cause overlap.

About paragraphs and headers - let me check, will be back soon.

Cheers,
Anna

Ok.

There is few ways horizontally centering elements:

( 1 )this option aligning element that you are styling

(2) this option is aligning all elements and text inside the elemnt, that you are styling

So if #1st method doesn’t put object in the center, go to it’s “parents” and use method #2

Also I would recommend to reduce some headings font size and check width of elements for all devices (if they set in pixels) so they will fit screen width.

You almost done with responsive site, I believe you can do this.

Good luck,
Anna

@sabanna First I would like to say thank you so much for the words of encouragement haha. Secondly I almost have the website ready, there are just two things

  1. the icons at the top of the page have a column around them which is making the mobile have more space on the sides rather than fitting to the screen (hope that makes sense)

  2. the picture at the bottom only one is not the right size. Why is that

here is an updated link!
https://preview.webflow.com/preview/dthydro?preview=3ee4ee72a2ec2fa2b55198456a1de406

@joseph77

You have padding on some of the div elements that is pushing your images off center in the mobile view. Remove those and your images will be centered.

For #2) You have a style class named (photo size) you need to simply apply to the top image. I would also recommend applying it to all of your images in the mobile view and give your self a little spacing between images so that it is easier for the user to view.

I hope this helps. If not please let me know as it is about time I start helping out this awesome community! I am pretty pumped and love this software.

Best,
Sean K

1 Like

Hi again @joseph77 :smiley:

  1. About icons >>>> there is row size that cause overlap

  2. About photo. It has properties like HiDPI image, that will make this picture looks twice smaller. Just uncheck it.
    And how @seank noticed, would be right to give all photos same class.

And few more tips:


Cheers,
Anna

@sabanna you have been the biggest help! you are awesome! the site looks great now I made all the changes THANK YOU SO MUCH
@seank Thank you for all of your advice as well! you all rule!

feel free to visit the site and if you see anything else thats weird let me know www.dthydro.com

1 Like

I am glad that I was able to help :slight_smile: Such moments makes our volunteering enjoyable :blush:

1 Like

Glad I could help as well. Next time I will provide screens if you ever need help again.

1 Like

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