Streaming live at 10am (PST)

Problem with top Container Design Mode & Resizing for Mobile Devices


#1

Problem with top Container Design Mode & Resizing for Mobile Devices

See screen shots...

  1. I have to have Items in my Top Nav Container OFF Center in Design Mode to have it look Perfect after Publishing on to the WEB.. is this normal?

  2. I am having Big problems making the Top Nav Container FIT for Tablet Devices .. Cannot get this right ...
    I am assuming that once we get this right for Tablet settings then the phone settings will be easy to figure out..

  3. Special Note you all helped me with my adding Special Code to Widen the Container .. like this very much...

  4. Once we get this Right .. is there a WAY for me to Duplicate my Site so I can have a BACK UP of it being Right so I can go back and look at if I mess things up?

***** 3rd Screen Shot is LOOKING CORRECT after Publishing ON WEB.. this is what I need the Main website to look like and hopefully on the Mobile Devices I would like to see all but the Nav Links not turned on yet but in a special Mobile menu.....

I really really appreciate the help... bruceo

Here is my public share link: [LINK][1]

https://preview.webflow.com/preview/allquickrepairs?preview=e7d1be4f20979986643984f7c12f5633


#2

Hi @bruceo,
It seems menu-button ("hamburger") was deleted from navbar, that's why it is not appear when you look site on tablet and mobile view. You can add new navbar to the site and move menu-button from there to existing navbar. then just delete rest of new navbar.

Regards,
Anna


#3

Sabanna, Thank you .. Still have problems..

I had tried to do exactly what you said even before and it looks closer but unfortunately the MENU Icon is not showing up on any of the Mobile device pages??? can you take another look please.. the rest of the data is looking much better ...
I prefer not to loose the graphic on top right side on mobile sites but will be OK with removing it if I have too .. so I am still freaked out that the menu button is not showing up yet... bruceo


#4

I Have figured out how to COPY my files to make another Backup site .. I am ok on that question above.. bruceo


#5

Will try to save that :wink: ... I'll be back with screencast.


#6

Here we go: https://drive.google.com/file/d/0B-7cg8BSq1Z_YzFfclBFbEppTlU/view?usp=drivesdk

Sure you can style it in different way. It is just example.

Regards,
Anna


#7

thank you so much I will study it right now... bruceo


#8

Sabanna... WOW what a wonderful job you did on the Menu for Mobile Devices... I was successful.. OH my this is going to take more experience to get this just right.. I will try to document your steps for my Future Work.. thank you so very much.

Question I am using an I Frame to bring in my Contact Form... I have it very narrow for mobile phones..

Is there a work around some how if I have 2 Contactus pages Contact1 and Contact2 I want only Contact2 to be in the Mobile Device Menus and I want only Contact1 in the Main Website as a link...

Do you think I can do this without issues?

My customer is not going to be very happy with my making a narrow form for his website.... It is easier on my learning curve to just IFrame the different forms into the site.. do you think this is possible. Thank you again for being there for me...
bruceo


#9

Contact1 will have a WIDER LARGER I FRAME form .. that is the difference.. bruceo


#10

I am glad video helped you.

About contact form: There is styles pushing from iframe content and even using "!important" doesn't help to change width of the form. If it is possible, you can try to put option width=100% on that side, when you create the form. Then it will be easier to control it in Webflow.

One more option possible:
if you have 2 different iframe codes for different contact forms, just add them both to 2 embed code widgets, but 1st make visible only on the desktop (and tablet), 2nd -on mobile.

P.S. Form is not so hard, you could create such form in Webflow.

Cheers,
Anna


#11

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