▼
Streaming live at 10am (PST)

Auto margin-left on an object aligned left?

#1

Hi guys,

I have a fixed side bar with page scrolling using this example: https://webflow.com/website/Fixed-Sidebar-Navigation-Example?s=fixed-sidebar-navigation

I would like to have auto margin on the MainSection inside the fixed sidebar just like the Navb and the Footer on the page. However, because the MainSection is aligned/flushed to the left the auto margin does not work.

I have tired aligning MainSection to the top at 100% width (inside Textbox at 50%), but this prevents me from clicking on my lightbox images on the right as it is covered. Adding -1 z-index also disables the links in the Textbox.

Is there a work around this? Thanks.

Here is my site Read-Only: https://preview.webflow.com/preview/loujyl?preview=b8a97dbadfef788bf9a91963e86708fa

Please go to the ‘Work’ page to see the problem in question.

#2

Hmm… it’s hard to understand where you issue is. If you could clarify more with a screenshot or something to give a better view of the specific part. Others may have a look as well.

#3

webflow-2

32
Screen Shot 2017-11-18 at 19.08.32.png1921x962 186 KB

I hope this provides a better idea of what I am trying to achieve.

The first page demonstrates how the auto margin works on the ‘Info’ page. The second page ‘Work’ is where the issue is, the fixed side bar is aligned left but does not align with the rest of the elements as it does not implement the auto margin – sorry, does this make sense?

#4

Okay I see. Now the auto margin is working from what you’ve showed. Images are obviously different because they’re inline block by default. You could set individual images as block with a class or manually. But it looks fine from here. And don’t think display setting will effect it much.

Remember, a user will not drag a browser like we do in testing. They will view on one device at a time. So the inital screen size is what they’ll use. They won’t go to your site on a desktop, then pick up the phone to see if you site has responsiveness :slight_smile:

Sometimes, as developers and designers, we tinker a little… ha… I actually really like your design. But dang, I think it’s really minimal in difference. Looks good on all devices here.

#5

@garymichael1313 thanks for the advice and compliment! :smile:

It is a very minimal difference, its just I’m working on a wide desktop screen so it’s very annoying to see it and have it at a different font size! I thought that perhaps there could be a simple workaround to having the ‘Selected works – …’ text aligned to the Navbar and Footer

#6

True… but your font can really only be “fluid” not actually true repsonsive; there will always be tweaking. Have you tried using “VW” (viewport width) in the font size? This will give the fluid resizing you’re probably looking for. Also “EM” may give a comparable result.

FYI - WF will do a calculation for you in the font size setting, so you can test different options. (Works for the 3 default values, PX, EM and %) Type in pixel value, then click drop down and select em. It will convert to that setting for you. Try % as well. Different combinations and resize to see if you get the result you’re looking for.

I understand you quality standards! I’m the same way… :wink:

#7

Oh yes I’m using VW on the font – I was referring to the difference in size of the 'Selected works –…" and the text on the homepage ('Louise Lee…") since its wider.

Haha, I glad you get where I’m coming from!

#8

A-ha! Just solved it.

Apparently, playing around with the z-index was rather fruitful.

Thanks for the advice regardless! @garymichael1313

#9

Dude! Oh… assumed male … that’s awesome! I totally forgot about that. You can overlay the margins and padding with that. How did you do it, I’m curious.

#10

I’m actually so shocked I didn’t do this before:

  1. changed the fixed side bar section to align ‘Top’, 100% width with auto margin
  2. text box to 50% width
  3. set scrollable images to Relative and z-index; 1
  4. set fixed Navbar to z-index; 2 so that the images scroll underneath it
#11

Nice! Can I use this setup if you don’t mind? I’m copying it to test on a sample page.

#12

Of course! Please feel free to use. :grin:

#13

Thanks… have a great weekend. Good luck on the project.

#14

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