Need Idea For How to Best Structure An Uncommon Layout

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?

Cheers, Dave

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?

Cheers, Dave

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.

Hi @GodlessGlen, I am working now to update my example, I hope all will be clear after that… update coming soon. Cheers, Dave

1 Like

Thanks a million Dave! I may play around more with percentage based margin or I may leave it as you have it and run with it for a layout.

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 :slight_smile:

1 Like

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.

Here’s the website: http://glen03.webflow.com

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.

Cheers, Dave :slight_smile:

2 Likes

Hey @cyberdave I think he is all sorted now :slight_smile: Although I found sticking with sections and columns worked just as credibly for him and have redone the design based on that :slight_smile: You may want to check it out for yourself :smile:

1 Like

@Robert_Craig, great thanks. There is multiple ways usually to style things, create layouts, etc, and I appreciate your help with this :slight_smile: 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 :smile: Thanks again for your great advice. Cheers, Dave

1 Like

No problem at all :slight_smile: 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.

Anywho, here is the link to my updated website for this. I have made it public for now: https://webflow.com/website/glen04

Hi @GodlessGlen, Just following up on this thread. I saw your public link - great job! Are there any areas you want to improve on? If so, please post a few screenshots with the details and we’ll take another look.

1 Like

Um I could fix that also if you like…

OK fixed layout all the way through to phone portrait…

https://webflow.com/website/glenmyver

2 Likes

Looks good Robert! Thanks again!

2 Likes

Hi everyone! Could somebody tell me what the solution for this problem was? I am facing the same layout challenge but don’t see the final resolution to the problem. Please let me know how this was solved as I am struggling to accomplish the layout. Thanks in advance!
Miguel

Hi Robert,

Could you please provide me with the solution to the layout challenge that the originator was having?

I am trying to accomplish the same layout but unable to.

Thanks!