How to line up new elements in containers properly?

Design help General
1

Hi guys,

I just have a question about positioning inside containers. I have been following the ‘building of webflow.com’ video as I am learning, and have almost finished the main page, but have run into two problems, both related to lining up new elements on the page. I haven’t included any links to the site at this point, but can do so if needed.

One example is that I would create a section for the signup bar, then a container within it, and then a heading inside the container. Everything is fine until that point. Then if I try to add another text box to that container, I can’t get it to go under the heading. If I hover the text box over the container I can see the blue line on the left of my heading, or the right, but never on the top or bottom. So instead of nicely sitting underneath the heading, the new text box, or form block etc will be beside it and everything is all out of alignment.

I had similar troubles with the blue ‘Sign Up’ button at the top of the page (Navbar). It is meant to go next to the ‘Log In’ NavLink, but while on the video it just slots in nicely to the right of that NavLink, mine ends up in some strange alignment that looks nothing like what happens in the video, and I eventually just had to skip that part of it.

On some containers, like the one I have in the middle of the page, I seem to be able to add text boxes or other elements on the top or bottom of other headings, so I have no idea what the difference is. Interestingly, in that case when I hover the new element over the container, I see the top and bottom blue bars, but not the left or right options. I’m not sure if there is some alteration I need to make to the containers, but I couldn’t pick anything different being done in the video.

I am using Firefox as a browser, but the same happens on Chrome.

Just one more question while I am here… hopefully an easy one. If I take the underline off a text link (using text decoration), the underline always comes back as it doesn’t save. Anyone else had this issue?

Thanks very much for your time!

Edit:

Here is the site (below).

https://preview.webflow.com/preview/magnetic1423515903823?preview=413a5dcfb97bc36c27aeb6d60e58a6bd

I just removed some of the custom text and pictures I had so it looks terrible, but it was looking very similar to the proper website prior that that! :smile:

2

Hi @mrukk, thanks for the detailed post but can you please post some screenshots and the specific elements/classes that are giving you trouble? Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

TIA!

4

Wow, I made a huge post here a week ago and when I came back (after a week of moving house with no internet) it was gone! Oh well, I’ll try and remember and do it all again.

Thanks very much for suggesting the screenshots. I will post some. I am still extremely interested in the answers to my questions, as I very much want to continue with my website and sign up for more access etc, but am feeling like I have completely hit a wall at this stage.

Below are the screenshots and descriptions.

(1) This shows me dragging a new text block element into a container in the middle of my page. As it hovers, you can see the blue line under the heading text, indicating the positioning of the new element, exactly as it should be.

2560×1440 296 KB

(2) This is the result. A nicely lined up text block underneath the heading text. This is what I would expect to happen, and seems to happen in the videos of how to make webflow.com, but while it sometimes works for me, other times it doesn’t.

2560×1440 330 KB

(3) This is where it goes wrong for me. As you can see, I am again trying to add a new text block element to a container, this time in the sign up bar. On hovering, the blue line indicating where the element will go is on the right of the heading text. In this container, I can only get the blue line on the left or right, whereas in the other container I can only get it on the top or bottom. Any ideas why?

2560×1440 295 KB

(4) And this is the result of the above. If I put the new element on the right of the heading text (my only option), it goes all skewed out to the right and offset vertically as well.

2560×1440 321 KB

(5) Finally, I will also just show a similar issue, where I try to put the blue sign up button on the banner, as shown in the ‘how to build webflow.com’ video. Again, my only option is to put it to the right on the log in navlink and again it is all skewed out to the right and vertically offset. In the video it just pops in nicely all lined up to the right.

2560×1440 348 KB

So that’s it. If anyone has any suggestions on why this is happening and what I might be doing wrong I would be extremely grateful. I’m very happy for people to say I am the dumbest webflow.com user ever… as long as there is some sort of answer along with it so I can move on! :smile:

Thanks all.

5

Does anyone have a few minutes for this question? Sorry to be a pest, but I can’t believe there is not some sort of simple answer to this, and I’d be really grateful if someone could help me out.

Thanks again!

6

hi @mrukk, that post exists, but somehow it got hidden, so nobody was looking at this :-/ Lets try to get this solved now :slight_smile: I am taking a look, others may also take a look :slight_smile: Cheers, Dave

7

Brilliant, thanks for your time! :slight_smile:

8

Hi @mrukk , on the sidebar issue, see my video: http://quick.as/9qljippvv

On the button styling, can you tell me the link to the tutorial video you were watching, so I can see how it was supposed to be positioned? Cheers, Dave

1 Like
9

Thanks very much Dave. The video is below…

I’ll have a look at your video now. Cheers.

10

[quote=“cyberdave, post:8, topic:10232”]
Hi @mrukk , on the sidebar issue, see my video: http://quick.as/9qljippvv[/quote]

That is just brilliant! That explains it perfectly and simply. I was sure there must have been a simple explanation.

Thanks again for spending your time to help me with that! :smile:

11

Hi @mrukk, does that help with the button question? basically it is also a matter of styling that with correct positioning, in this case, you would use display inline block for those elements that need to be side by side… You might watch that part in the video again and see if it makes more sense now.

Cheers, Dave

12

One more thing while we are at it. In my first post I mentioned that I can’t get the underline to stay off a text link. If I put a text link in, then give it a class, then remove the underline via typography/text decoration, the underline is removed. If I then go back and click on the text link the underline automatically comes back (including the underline text decoration button being re-selected). I’ve no idea if there is something I need to do to save the fact that I have removed text decoration or not? If this doesn’t make any sense perhaps I can see about making a video of it.

Thanks!

13

[quote=“cyberdave, post:11, topic:10232, full:true”]
Hi @mrukk, does that help with the button question?[/quote]

Thanks again Dave. That does make sense and I’ve managed to get it looking much better now, so I think I might restart and get the whole thing sorted from scratch. Very much appreciated!!

14

Hi @mrukk, no problem, I am here to help :slight_smile: Question, which text link on the page is it, that you are having the issue with ? can you tell me the class name of the link in question? It might be that you are setting the link css while the link is having the “current” class active, so while the link is viewed when not current, the text decoration underline is visible.

I await your response :slight_smile: Cheerios, Dave

15

[quote=“cyberdave, post:14, topic:10232”]
Hi @mrukk, no problem, I am here to help :slight_smile: Question, which text link on the page is it, that you are having the issue with ? can you tell me the class name of the link in question? It might be that you are setting the link css while the link is having the “current” class active, so while the link is viewed when not current, the text decoration underline is visible.[/quote]

Thanks. I haven’t got a text link there at the moment, but am trying to add one. I’m having no luck though… I can’t seem to get out of ‘read-only’ mode. On the dashboard I’ve un-shared my site, but every time I go into it, it still says it is ‘read-only’ and nothing will be saved. I actually can’t find anything about how to enable or disable read-only mode on google or the webflow support center… I suppose it must be so obvious that no one else has ever run into this problem? :smiley:

16

Hi Dave,

Actually don’t worry about the text link issue. I just tried loading webflow in chrome rather than firefox and I was not in read-only mode, and the text link underline seemed to stay away. So I’ll play around with it a bit more, and maybe try using chrome, though I don’t find the resolution as easy to deal with.

Thanks again for all your help mate.

17

Alrighty. So sorry to bother you again, but I still just can’t figure out how to get the blue sign up button anything like the one in the video of how to make webflow.com https://www.youtube.com/watch?v=gIVYQw8Ei-w at around the 3 to 4 minute mark.

As shown in the pictures below, I can get the button to the right of the Nav Link (Log On), but then when I try to add a new class to the button (Sign Up), as in the video, the button goes underneath the Nav Link and I have no idea how to get it back, or why it did that in the first place. This is shown below…

1170×492 45.9 KB

1254×486 55.3 KB

The main thing is figuring out why it jumps below the other one so that I can then edit it into a nicely lines up position using the margin adjustments, but I’d also be interested in why it has the white lines at the top and bottom of the button… I think it might be from previous attempts at formatting and it just seems to do that by default now, but I am unsure as to how to fix it.

Again, apologies for the questions… I was able to get a long way previously, with this and my previous question being the only issues along the way. I promise I won’t ask anymore without having done a lot more of the tutorials in future! :smile:

The shared site is here https://preview.webflow.com/preview/magnetic1423515903823?preview=2d50a005e90c1bb08410726e529eaf1c

18

Sorry, just a quick bump to make sure this post wasn’t hidden like my last one seemed to be.

Thanks again.

19

Hi @mrukk, yep can see the post fine, once I have a chance to look at this, will advise :slight_smile: Thanks for the detailed description. Cheers, Dave :slight_smile:

20

Great, thanks for that Dave! :slight_smile:

21

Hi @mrukk, check out my video below for help with this styling:

I hope this helps, cheers :slight_smile: Dave

1 Like