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.
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
check font size for tablet and mobile views in Headers
yet, I would recommend change or resize Brands Photo, it is definitely too big for mobile
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 !
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?
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.
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.
@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
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)
the picture at the bottom only one is not the right size. Why is that
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.
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.
@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