Streaming live at 10am (PST)

Left text align to container, right image full screen


#1

Hey guys I’m not sure how I can make the green text line up with the edge of the container (shown by the red line). For the content above and below that sections I have the content in a container, but in the middle section I want to have the right column image go all the way to the edge of the screen. My challenge is I’m not sure how to make the text in the left align with the container, while the image on the right go full scree. What do you suggest? thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

So you want the tower image to stop at the red guide line? A little confusing what you’re asking. Please post your read-only.


#3

thanks for looking! I’m not going to share the read only for NDA reasons. The image I uploaded before is from Photoshop. Here is the What I’ve got in Webflow. I want the “Outdoor Antenna” section to line up with the text above, which is within a container. If I put the Outdoor Antenna text in a container, I can’t have the photo stretch to the edge of the browser window. Does that make sense?


#4

Yes it does. That’s kinda why I never use containers. And honestly, they hinder your css growth skill set.

The “Outdoor Antenna” on the far left - in the middle section right?


#5

Yes, I want that “outdoor text” to be left-aligned with the “There are 2 factors” text, but I want to do it using best responsive practices.


#6

Okay gotcha, the best option is - first make that it’s own section - under the booster strength, coverage area, outdoor signal. I would structure the foundation with 4 layers.

Layer 1. Section: Set to Block, no sizes or anything, just class name to designate for identify purposes
Layer 2. Div 1 (wrapper for all): Set to Flex, center center
Layer 3. Div 1 (text wrapper):
Layer 4. Div 2 (photo wrapper): Set to Block initially

For the NDA purposes, I understand. But I can’t get in to see, so off the top of my head. It looks like you may have it something like this, but try this setup. Now when you put everything in, you’ll have 2 options. Manage alignment with display settings (flex, block, etc) OR margins & padding. But with this setup, you’ll be able to test without fiddling with individual divs.

From the .jpeg, you can take Layer #2 and use: Left & Right even inner padding. You can reduce the padding on smaller devices. The photo will auto-resize.

Let me know how that works.


#7

Thanks, so are you using an image element inside of layer four, or using a div background image?

If I use a left margin on the text div (layer 3), should I use a percentage value?


#8

@jaatendi, did you get the text how you wanted?


#9

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