Design spacing help and mobile function help

Main site URL: https://www.bioxytraninc.com/
Read-only link: https://preview.webflow.com/preview/bioxytraninc?utm_medium=preview_link&utm_source=designer&utm_content=bioxytraninc&preview=7409541eb122ac4059972df5eadfd891&mode=preview

Have two small issues on the site:

  1. On the contact page, there are two columns in the top section… the left is a contact form and the right has company info. I simply removed the top “details wrap” that contained the first section of the right column (Our Offices and the text below). Unfortunately, after I removed it, the width of the ENTIRE section became a lot smaller and centered. I haven’t published it yet, but you can see what I mean in the back-end. Im not sure why that even happened!

  2. On mobile… when you click on the subscribe button at the top of the footer (first item in footer) … the pop-up pops up… but the X to close the form doesnt work on all the pages except for the home page.

Thank you so much!!!

  1. something strange happening with that “grid” which I can’t edit. I would put a 2 column in the contact_container and then move the contact_form_wrap into the left column and the div block with addresses into the right column
  1. don’t ask me why, but the interaction isn’t fixed to the X on the other pages… when I added the close interaction to another page, it stuck for all the pages… and the home page had the animation twice.

in other words… turn it off, turn it on again worked!!!

Thank you so much for the response!

I re-did the section as you said, and it works. Is there a way I can edit the way the columns look on mobile within the editor? I would like to make the right column’s text centered and make the top margin smaller. I can CSS code it, but I’d rather use the editor when possible, as its more reliable.

For the X’s on mobile, they still don’t work. I understand what you mean by the animation not aligning with the X, but I’m not sure where the setting is to control that. Can you please show?

I really appreciate the help. Its hard enough learning a new program, let alone with a project that someone else created and put settings in random places. I’m a wordpress guy, so this is all new to me.

Cheers,
-Daniel

Sorry, didn’t get back to you… but it looks like you’ve got things working OK? is that right?

Nope, not yet… still need help with these:

Is there a way I can edit the way the columns look on mobile within the editor? I would like to make the right column’s text centered and make the top margin smaller. I can CSS code it, but I’d rather use the editor when possible, as its more reliable.

For the X’s on mobile, they still don’t work. I understand what you mean by the animation not aligning with the X, but I’m not sure where the setting is to control that. Can you please show?

P.S. - another issue. On the “contact” page… I added an image of google maps into a section on the page. How do I make the image link out to an URL? Also, for the image on mobile, I would like to keep the same height, but shrink the outsides

I’m not sure what you are referring to here - can you be more specific about which columns (I can’t find any “columns”) :

“Is there a way I can edit the way the columns look on mobile within the editor? I would like to make the right column’s text centered and make the top margin smaller. I can CSS code it, but I’d rather use the editor when possible, as its more reliable.”

X on mobile works fine. Am I missing something? - https://drive.google.com/file/d/1dvffe-Sz6Zo9neeL3vfjjZG2bJxG7Yv7/view

map image link out to an URL - https://drive.google.com/file/d/17Zp3lh5TGB7ku8yR9VY0rs52qY5minSc/view

map resize - https://drive.google.com/file/d/1SBOvhgP32c5EJjlTuIxwIF7aJz0R469B/view

BTW, I would be careful with the “small print” at the bottom of the website. It’s VERY hard to read and I would think that in the USA people could argue that as it does not have a WCAG conformant contrast ratio that they COULDN’T read it, so it doesn’t apply to them.

https://a11y.webflow.io/post/colour-contrast

Ok… some of the things have worked… some havent. I really need to get these things done… so lets try to get these done in one shot. Thank you so much for all your help so far… we are close.

  1. On the home page… in the first section there is a button with the text “Sign up for bioxytran updates” - when you click on it… a pop-up appears where you enter in your name and email. For some reason… after you hit submit… you are re-directed to a broken page. We were able to fix this problem for the same pop-up in the footer… but the problem still remains on this section of the homepage. I need to fix this ASAP or the client will freak out!

  2. The X button only works properly on mobile on the home page. Try it on any other page… and it doesn’t work. I have no idea how to pair an event with the location of the X… so I have no idea how to fix it.

  3. I got the link to work for google maps, that was easy… thank you. Unfortunately… the re-sizing video you showed me doesn’t really work… as the changes made in the video seem to be universal for ALL screen sizes. Example: when you change the height size to 400 “for mobile”… the height isnt just applied to “mobile”… the height is changed to 400 for all 4 screen type options.

  4. The column I was referring to exists on the Contact page… more specifically in Section 4… more specifically column 7… that contains the text: “our office” and “contact”. I would like to center that text ONLY on mobile… including the address and the contact info contained within this column 7.

Hopefully this puts us on the same page… I feel like they are all rather quick fixes, i guess I just don’t have enough experience with webflow and the logic its built upon.

Appreciate the help and hoping for a quick response. Cheers :slight_smile:

Hi there @Danya_Zim!

Thanks for listing these points out. I’ll do my best to address them individually below.

  1. There is an invalid URL in the Action URL of the form settings. This will need to be removed in order for the form to work properly.

  2. The X button seems to be functioning perfectly across pages when I preview the site; this seems to be smoothened out.

  3. We have a great Google map tutorial that has an example of editing the height of a map, this can be applied across different breakpoints.

  4. The individual text items will need to be aligned centered through the styling panel when the mobile breakpoint is selected (example)

​Hopefully this helps, and please feel free to reach back out if you have any more questions; I’d be more than happy to continue assisting.

My best,
Riley

  1. How do I get to this setting? I can’t seem to find it anywhere. Only link area that I am finding is the “link block settings”. I cant find “submit button settings” anywhere.

  2. For the 10th time… it only works ON MOBILE… ON the homepage… even when you see it in preview mode… IT DOESNT WORK ON MOBILE… im trying it now in preview mode… as we speak… AND IT DOESNT WORK ON MOBILE OUTSIDE OF THE HOMEPAGE!!!

  3. and 4) i was able to fix… thank you!

Somebody… anybody… two small things left to fix. Can someone please help me find these settings???

Hi @Danya_Zim, thanks for your reply, on the remaining questions, I am here to help.

The form button is in the hidden form that you have setup in the navigator, see here on the home page and the settings tab where the form settings is shown when the form is selected in the navigator: Image 2020-05-24 at 7.58.19 PM

On the issue for the mobile form not working in mobile on pages outside of the home page, I took a look and I can see the mobile popup on the home page opening by the footer or the hero section, on the other pages are you just using the footer link? Can you send a screenshot of the button on the page on mobile other than the footer if it exists?

I tested the popup modal on mobile on the about page from the footer and it seemed to open and close for me on my end, if you can help to share the exact page, I can help to take a look further.

On the interaction on the subscribe button on the hero section in the home page, that is using a class based interaction targeting elements within the parent video newsletter popup class: Image 2020-05-24 at 8.11.54 PM

If that same structure does not exist on other pages using the same interaction, then the interaction will fail to trigger on the other pages, I can help to take a closer look if you can help to point me at the exact of the button on the page on mobile and the page name where this is not working as expected.

Thanks in advance