Understanding container width and alignment

Support
#1

Hello -

I find myself in various UI areas wondering how to tell a container to be a larger or smaller size. Can someone help me understand how to tell a Div to be taller, or wider, or float right? I’ve reviewed this, but still can’t tell how these things are done: https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103.

For example, I added a second row above the default 23 header and added a Search block. It floats left. Also, the first time I created a row, it came with the height set to about 250px. I couldn’t figure out how to make that shorter. Nothing was in there except the search block. I’m not even sure how I got this version to be shorter. Sometimes the Setup panel has a height and width and sometimes it doesn’t. Sometimes only max-width is there. Is there some protocol for how and when these show up?

#2

Hello Richard,

Thanks for writing in!

You can adjust the height of the bar setting so that the height of the container will become shorter. The maximum width of the container is also needed so that it will contain the elements inside it if the screen is too wide. By default, 1200 pixels is added as the maximum width so that in larger screens, the content area will always be 1200 pixel wide and your element should be positioned and inline with the rest of the elements below.

Hope this helps.

#3

Hello - Thanks.

So, I’ve got a global block with a Inline Search element in one row. How can I get that element to float to the right of the first row? Thanks!

#4

Hi Richard,

Please click the column which contains the search element. In the column settings, find the text format and align it to the right so that all of the elements inside the columns will be positioned to the right of the column.

Hope this helps.

#5

Hi RueNel - I’ve tried this, but as you can see, the Search box is still staying aligned left. Ideas?

#6

I’m really trying to use these in a Global Block and have the two lines align right. They would be opposite the logo in this picture.

Also, the global block is being constrained to 50% of the header area? Can you help me learn how to control this?

#7

Hello Richard,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look at your custom header? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#9

Hello Richard,

Please edit your header and remove the maximum width of the container.

I have duplicated the header and please check it out.

#10

Hello. Thank you! Can you tell me why my change, removing the max width didn’t fix mine? I renamed the headers to use yours and another one other that got fixed somehow. The one that’s still broken is named “Test.” I removed the max width and it’s still narrow.

#11

Hello Richard,

After removing the maximum width, you also need to set the self flex to Fill Space Equally.
You have set it to No Shrink which is why it is not expanding to the right side.

Please check out the test header now and play around with the self flex settings. To better understand how flexbox works, please check this out:

#12

Thank you for the links. I will read up on Flexbox more. Lots to learn!

#13

You’re welcome, Richard.

#14

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