Streaming live at 10am (PST)

Responsive styling help for mobile layout


#1

Hi guys.

I made my project fully responsive and everything was working perfectly. Earlier today I added a section with share buttons, and this evening I noticed that the project is not responsive anymore. The section with share buttons is placed far down on the pages, and shouldn’t have any impact on the Item section, used as a Hero section on most pages besides the landing page.
I restored the project from a back up earlier today, but it looks like this must have happened long before that.

I would appreciate it a lot if someone would look into this. I have reported behavior like this before (I believe it was under the topic ’ Designer gets buggy’

I know for sure I haven’t messed around in Designer, causing this problem. I was very careful, being happy that everything was looking good, and working perfectly. So I hope someone can look into this. @Brando , you asked me to give you a shout if things like this happened again… so here I go … calling out to you :slight_smile:
My share link : https://preview.webflow.com/preview/filigree?preview=43b6092a35c8a6d1379f0b07318817d1

Project live: http://filigree.webflow.io/
Cheers,
Sven


#2

Anyone? Webflow staff … any ideas on why this is happening?


#3

Hi @Sven_Erik_Slattedale, thanks for reaching out. I am taking a look, however it would help to know also what browser you are using, could you please let me know that?

Thanks in advance.


#4

Hi @Sven_Erik_Slattedale

Thanks for reaching out and for bringing this to our attention!

This definitely sounds odd. I’m checking your site and I noticed that you’ve restored a backup and added a new page and elements and styles in the past few hours after reporting the issue. Are you redesigning the breakpoints or continuing to work on new pages and new designs?

Please, can you provide some more details to what exactly you believe happened to your project:

  1. Is this affecting only this one site?

  2. Can you at least give us an approximate date of when you last checked the breakpoints and the designs were as you created them?

  3. Can you recall what styles you added that are now gone or changed? Can you give some examples? For example:

  • which styles did you set on other breakpoints and for which element before the issue and that are now different?
  • Where the styles completely gone on the other breakpoints? Or, were some gone? Or, were they changed to different values?
  1. Can you please try to (1) restyle an element for all breakpoints like you had done before the issue happened, (2) Save the project (cmd+shift+s), and (3) refresh the designer and tell us if the styles are being saved or not?

Any information that you can provide, can help us resolve the issue faster.

Thanks in advance for your patience, understanding, and cooperation!



With any issues, please always check the following:

  • What browser are you using and is your browser up-to-date? Does updating the browser fix the issue?
  • Does a hard refresh on the Designer resolve the issue?
  • Are you experiencing the same issues while being logged into Webflow using Incognito mode with browser extensions turned off?
  • Are there any issues in the console? If yes, please take a screenshot of your Console and send it to me.


#5

Sounds great @cyberdave . I’m using the latest version of Chrome.

Thank you!


#6

Hi @Sven_Erik_Slattedale, thanks for getting back to me. I can see that there exists in the design some overflow, which will affect to the responsive styling.

When I looked at the published site, I can see that overflow exists, where there is some styling on elements which are going beyond the body viewport.

I am not sure though, which social buttons that you added that you are referring to, or how the page is not “responsive” what specific elements are not having a layout as you intended?

Could you share a screen shot of those in the navigator in the designer and confirm which page is having the issue?


#7

Hi @AnnaKelian
Thank you so much for looking into this.
I have ad problems like this for about two years actually. The responsive part is actually not as huge as problems I’ve had with other project. But in all my projects I do have the same experience… I finish something, save it, publish it and are very satisfied with everything. But when I start working on the project later the same day, or the next day, I suddenly notice that things has changed. In this case, it’s the breakpoints.
I’m sorry I can’t remember the styles I used. I do remember I avoid using flexbox on most sections (and their items), to make sure that even IE would be able to read the site. Sorry I can’t give you a lot more information on this.
I do remember that the section (Item section) was set to automaticly ‘stretch’ and fill out the background (sorry if this is not the right word to describe it) when the columns where set above each other. Now headings are not in place, text/columns are on top of each other (looks like the columns are set to absolute now, I did not do that).
Collection Items size looks different… well… I’ve done a little change on that to fix it… sorry, I know I shouldn’t have, it’s the frustration that took over I think. So yes, styles on other elements and sections had different/changed values too.

I’m not really 100% sure, but I think it was saturday when everything was OK.

Except for collection items, I havent done anything to other styles or settings. I’ve only added a few pages for a Foxycart set up/styling… and of course… the section with the share buttons. The rest is how I ‘found it’

I’ll try to restyle an element for all breakpoints, and get back to you a little later.

From other project I have experienced a lot more than just breaking point. Sections suddenly get placed on top of each other, loads of styles get changed, images get weird (landscape img is suddenly looking like protrait img) Collection item/lists are on top of each other…and this is just a tiny bit of what happened in other project. It’s been so bad that I actually had to rebuild everything from scratch… in two of the procjects I had to rebuild the entire project from scratch TWICE. In one project I spent more than 90 hours in designer, just because I had to recreate everything over and over. It’s a huge loss of time and income, and clients also get frustrated… so this is not good for business.


#8

Hi, thanks so much, well, it is really hard to tell without having some idea what it was like before, but usually styles do not change by themselves unless there is some custom code that is being used on publish.

I see in the social share section symbol, that there was a couple of code snippets loading custom code on the published page. I would test and remove the social share section then republish and see if things look more normal to you without the social share section.

A good idea is to backtrack a bit in case some style was inadvertenly applied to an element.

I will take a look if you can give those specific examples of what is not looking as you intended, the screenshots would really help (https://getcloudapp.com).


#9

Hi, @cyberdave.
The social buttons I referring to is the share on FB,Twitter etc buttons. (Sorry my English is not so good, so it’s a bit difficult to explain correctly sometimes).

If you give me a min, I’ll make a short video to show you. I have no problems with the landing page… the rest of the pages though…


#10

Thanks @Sven_Erik_Slattedale, no problem, I am here to help get this resolved. Yes a video is very helpful and I will be standing by. Thanks so much.


#11

Thank you @cyberdave … so happy with all the help! I really am!

Here is a link to a video https://app.hyfy.io/v/ab1Q6L6ceIU/

The category templates looks quit ok, and the product template is not the worst (I’m currently working on the add to cart buttons, so I know that it’s my foult they’re not looking good), but when you look at About site, Women, Men … there has been changes there. They used to look perfect, but not anymore. Contact, Terms, History of Filigree, Ring size… there is changes on all of them…I’m using the same classnames on the section and columns, Headings etc, so if there is a change on one page, the change will be on all of them.


#12

Hi @Sven_Erik_Slattedale,

Well there are a number of changes I would make to the site structure and styling, to help things work better.

I am going to set this post to Design instead of bug, because I think the issue may be in the way certain elements are styled. I am here to help and am going to list a few points here.

Navbar video:

Next up the item section.


#13

Hi @Sven_Erik_Slattedale, I was looking at the item section, and I have some suggestions to get the layout working, primarily to remove the absolutely positioned styling:

Just some suggestions, I hope this helps, take a peek at a great course in the University: https://university.webflow.com/article/intro-to-responsive-design

One more quick tip on the overflow coming.


#14

Hi @Sven_Erik_Slattedale, here is a quick video on the overflow, it was the 15px margin added to the form fields:

Cheers.


#15

Hi @cyberdave
Thank you so, so, SO much for all your help!!! Simply awesome!
Everything is looking good again now.

I still do believe that there has to be a bug creating problems for. I’m sorry… I don’t want to be that guy complaining all the time or the one who’s always negative… I really DO love Webflow, and I really do think you and the rest of the staff are doing an amazing job. But… I can’t really explain what happened to another project I’ve got. It’s been working perfectly for more than a year. Then summer vacation came, and I didn’t touch the project for one and a half month. Then the client sent me content for a blog post (I always make the blog posts for them). I created the post and published it. I didn’t check the project before I logged out, so I didn’t notice anything wrong, but the next day my client called me, telling me to check it out. And then I saw that everything was a huge mess. As described before, sections were on top of each other, crazy with and heights on images etc etc. So how come that could happen when all I did was to create a blog post, and before that everything was working perfectly? And things like this also happens on other projects that I work on…within hours, or from one day to another. When I leave it (and I check and double check before I leave it), it looks good… and then… suddenly a mess. I know it’s hard to believe, and it’s easy to think that I have made all the mistakes…but … well… next time it happens, I will leave the project without starting to fix it, and show both the public site and the mess in the designer… it will be easier to understand then.

Anyway… I will leave it there, and again I really have to say how grateful I am for webflow, the staff and all the help you provide me. Thank you so much!

Have a nice day @cyberdave
Cheers
Sven Erik


#16

Hi @Sven_Erik_Slattedale, thanks, I totally understand and I am here to help if the issue with the site losing some styling should persist.

A couple of quick notes:

  1. It might be possible the site was somehow opened in several tabs and some unexpected changes got saved
  2. It might be there was some unsaved changes to styles that somehow got saved
  3. I could be something else, maybe related to an update or bug, so I am not ruling that out, I just would need more info. The next time it happens, send me a mail to support@webflow.com and I will check it immediately.

Webflow does it’s best to find that kind of issue and prevent it, however bugs do at times happen and for that reason we built in the Restore feature, but in this case it might have been just easier to fix the styling.


#17

I have the same problem now, I’m understanding you situation.
All of my project can not use same previous time(Responsive function can not control).


#18

Hi @paemaster, is it possible for you to create a new post, or share the link to your existing post? I am happy to take a look.

Include site read-only link plus screenshots of affected elements: https://university.webflow.com/article/how-do-i-share-my-sites-read-only-link

Thanks in advance.


#19