I have a site that I have been trying to figure out the best way to structure a certain section.
Essentially, I want the left side to fit within a column… but I want the items on the right to go to the edge of the screen.
I also want the left and the right areas to top align. I haven’t figured this part out yet. I have the things on the right in div blocks and floated them.
Here is my site (it’s just a prototype site for now and isn’t all ironed out): http://glen01.webflow.com
Knowing that .w-container is width: 960px; that leaves us at width: 480px; in half. Column is normally padding-left: 10px; padding-right: 10px;, so we have width: 460px; div.
I suggest having a section element in which you just make a column divided by two. Now, create a div inside left column and change its width: 460px, margin-right: 10px; and give it a display: inline-block; Now go to the parent element (column itself) and add a new class to it. Once the class is applied make it text-align: right;.
Hi bartekkustra thanks for your help! I tried doing what you suggested but it didn’t work. Maybe I did something wrong or you didn’t understand what I was asking. I noticed that you didn’t mention anything about the “right” column. I have saved my changes on site if you want to take a look.
Scroll down to where it says “about the team”. That is the section that I am trying to recreate in webflow. I have wasted so much time trying to do this. Any more ideas would be appreciated.
Hi @GodlessGlen, is this what you are trying to accomplish, see my link, where I have a section with two divs, left and right, and in right div, I have three divs to work as rows. On mobile landscape on down, I set the Left and Right divs to be 100% width and display block.
Thanks Dave, I bet I can use that solution if I can figure out some additional things. I tried dropping a container inside the left div you have but I realized it goes to the left edge and doesn’t operate like it does in a full width section. So I will have to figure out how to position items so that it will maintain the same place along the left edge of the content as the other items on my page.
Also, I am curious about how to use the example and actually save changes. It is telling me that I am in preview mode and that changes won’t be saved.
Hi @GodlessGlen , regarding making the changes, the read only preview does not allow it, but give me a few minutes and I will create a clonable public site, so you can clone this to your own site dashboard. I can add a content div in the left side with some dummy text as an example. So you want the content to be aligned in the middle top and center correct?
Thanks Dave. Well I was wanting the content is be left aligned in the same way content is inside a container. I tried adding a div and then making it 460px and floating it right but it doesn’t look like that will give me the results I am looking for on every device.
Hi, @GodlessGlen, I would advise using percentage based widths, because if you use fixed pixel based widths, you will have to do a lot of extra work and you will get unpredictable results on different devices.
So you want content left aligned in the left hand side of the block, and you just want some space on left and right of the text?
Yeah, left aligned but appearing at the same place as other content that would be inside a container. I’ve yet to figure out a method that works. It’s tricky because there is no container setting the boundaries of the content.
Sure @GodlessGlen, I am happy to help. That was just an example suggestion, you can use a couple of other ways to probably do it depending on your design needs, but I find this one works fine for me
I have made a new layout with the ideas from the one you did. However, I am stuck on with something. I have a section of images and they are floated, and it is overlapping the next section down.
It’s stuff like this that takes so much time for me trying to figure out. I’m beginning to realize it takes longer than expected to layout alternative layouts. There always seems to be something that I am not doing right to achieve what I want to do. It’s frustrating.
Something else, I want to be able to lower the opacity of the background image without it affecting the other elements in the box, but apparently it can’t be done without a workout. It’s things like this that make me want to give up on using this platform, even though there are many things I love about it.
Hi @GodlessGlen, thanks for taking the time to post :). I can completely understand. There is a learning curve especially when one is used to other methods of visual layout or has learned CSS using different tools/methods. My advice is to keep with it, there are things to learn in a new way in Webflow, and it may seem daunting when starting out. I totally agree and we are working to improve this area.
I noticed you had another post and have been making some changes, are you still experiencing any issues?
Regarding the background image, the interaction only works on one main element at a time. To change the opacity for multiple elements, create an interaction with multiple trigger steps, with each step targeting a different element. Those triggers will execute one right after another, allowing you to create simple or complex interactions.
If you put other elements inside a container, and set the parent container opacity, the opacity will be set for all elements inside that container, so you might look at using an Image widget instead of a background image, and target that image element by class name separately than trying to set the opacity on the element having the background image.
Hey @cyberdave I think he is all sorted now Although I found sticking with sections and columns worked just as credibly for him and have redone the design based on that You may want to check it out for yourself
@Robert_Craig, great thanks. There is multiple ways usually to style things, create layouts, etc, and I appreciate your help with this There is always a need for both kinds of layouts, it all depends what you are trying to accomplish in the end product. Great thing is that Webflow gives the default sections and columns option, plus lets you create your own div layouts when you need Thanks again for your great advice. Cheers, Dave
No problem at all I truely love this product you guys have done an amazing job…
Tell me is there any plans at all to have this as a standalone app? I do worry about not getting access on the web and using it… Would hate to say to a customer up the track “I can’t help you just now until my web connection is back up :(”…
Hi Dave. The reason I did it as a background image is because I want to overlay a text block. Robert had come up with a way to apply some transparency to the images while still keeping the text at 100% opacity. I looked at what he did and couldn’t figure out why it worked for him. However, his version (which was taken from a clone of mine) had some problems on mobile. Sections are overlapping other sections and I can’t figure out a fix. I tried messing with padding, margin, and height and other things. See, this is my biggest problem with webflow. Sometimes I spend so much time trying to get a layout to work. I wrote in the forum under feedback about this specifically and was hoping that you or another staff would respond, but I’ve not heard back. Since then, I’ve been exploring other platforms. I encourage you to go read my post and really think about it.
