Sizing Sections, Rows and columns correctly

[detech]

Layout of one page navigation

Is it possible to setup my page to reflect the screenshot I have drawn out, see attached under screenshot of my current page. [image] [image]

I am trying to perform the steps told to me in the above link, however I am confused on how to properly set my sections, Rows and Columns to achieve the parts that currently reside under the 2 rows with 2 columns each that I created by following the steps.

I was also looking for videos on learning how to manipulate the builder options to do this myself but do not see a relevant video on your channel.

How can I get the one page navigation to show the four columns that corrospond to the menu items in the first (Be Operational" drop down and have them sized so they fit the page evenly, don’t have the headline wider than the column itself and auto size for every browser or device/screen size it is viewed on.

Understanding how to fix those specific issues will help me be able to resolve my own issues moving forward and may bring clarity to other clients in the future. It would be great for this to inspire a new video on this topic if there is not one that covers all this in the same video.

Thanks for your instructions, and direction.

[ruenel]

Hello @detech,

Thanks for writing in!

The section width depends on the page template that you are using. If you really want to fully control the width, you will need to use the Blank - No Container page template. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

The row width or the global container will be getting the setting from your Theme Options, X/Pro > Theme Options > Layout and Design > Site Width. Out of the site width, the columns will then be divided for the column widths.

If you can give us access to your site, we may be able to create an example layout that you have drawn in the previous thread. This way, you can play around with the example to understand the sizing and widths.

Best Regards,

[detech]

I added the secure note on my original post.

[ruenel]

Hello @detech,

I have created a test page that you can check in the secure note. The content area demonstrates the section, row, and columns like what you have in your mock layout. I also added something in the navigation bar that also demonstrates the same.

Hope this helps.

[detech]

Visit the page once more I added text to a column that reads “why so long” Please help me understand why and how to size these columns. it seems like I cant even move the longer one above or below the other 2 columns. only the text changes when I do that like the bigger one is fixed, is that because it needs another column near it?

Any video or thing to read to specifically teach me how to understand this?

[ruenel]

Hello @detech,

Are you referring to these columns?

This is because you have added three columns in a two-column row layout. The last column may go wide. If you only want to have wide column, you have to insert a new row and with one column only. We highly recommend that you check these videos.

Hope this helps.

[ruenel]

Hello @detech,

Your post has been withdrawn. I guess you have resolved your issue already. If there is anything else we can help you with, please do not hesitate to open another thread.

Cheers.

[detech]

You got me off to a great start, How do I setup one page navigation with the menu you created, like I did with my original menu? I don’t see the menu you created in my menus area.

[friech]

Hi @detect,

We are not sure what menu you’re referring to, but here’s the documentation on how to Set up One Page Navigation, its the same whether you’re using a standard header or a custom header built in Cornerstone’s Header Builder.

Thanks,

[detech]

(1) I set up the One Page Navigation however it doesn’t work. Can you check it for me?
(2) How can I also setup my text to not be cut off in mobile and different size devices?

[friech]

Hi @detech,

I have check your site header, 1) Unfortunately, it’s not possible to set up one-page navigation with your current header set up. These menus are dropdown and it’s not going to trigger the One Page navigation. The buttons inside it can be a One-page navigation trigger for example the One ID, you can put a #oneid on the URL link of that button, and assign a oneid (no #) on the Section/Row/Column corresponding to it.

2.) Navigate to Theme Options > Typography and configure the Root Font Size, set the XS and SM breakpoint to have a smaller base. These root base font size will work with rem unit, more details about rem here.

Hope it helps,
Cheers!

[detech]

Thanks that’s what I thought. Is there a way I can create a Menu that has a similar layout but will work for the parent or top menu items? I don’t mind recreating it if it will work out long term for the site.

[friech]

Hi @detech,

Unfortunately, there is none, because it will not make sense if a menu-item will open a dropdown and then at the same time scroll down to the page.

If you really need to have a one-page navigation, maybe you can add a bottom bar on your header, and then add an Inline Navigation element on that Bar for one-page navigation menu.

Thanks.

[detech]

I took your advice, worked out nice… one more thing. Why can’t I get the pattern I have in the background to also show on other parts of the site

I want to put the pattern on the boxes or the menu or anywhere it just shows the color of the pattern but not the pattern on repeat.

[ruenel]

Hello @detech,

You will have to insert the background pattern into the sections as a background image pattern. Take the test URL page in the secure note below.

Best Regards.

[detech]

The pattern doesn’t work on my page in the exact same way it does on the other you created. I put a blank section on my main page and it doesn’t work there (actually no picture loads there and the color wont change either) but it does work on the header. Weird, something must be wrong on the page or in the section that I don’t see.

I also can’t seem to get a card element to be full height of my column(s)

I used

$el {
max-height: 230px;
}

As you can see in the green section of my home page

First I will explain what I ended up doing which looks horrible and then explain what I want to also learn to do.

I was experimenting with the red section in another way thinking I can put 2 sections above and below one another and accomplish the text of the thing I’m trying to show on the bottom making more room for the top part to be where the user clicks to go to a detailed page

I ended up with a mess trying to format it and control all the space. For now I put a second card which I can use I guess to fill the space.

Any suggestions on these two issues will be valuable. Thanks.

What I would like to accomplish is keeping the sections clean like this screenshot but change the four boxes to be cards that are the same size and have the headline and button on front so its visually the same on the front of the card as the current setup. The card would flip over and that is where the service details and descriptions would be placed.

[ruenel]

Hello @detech,

1.) You need to set the Repeat option to “both”. The size should be set to “auto”.

2.) To control the space for the cards, you can set the Flexbox vertical alignment in the Div element container of the cards to Stretch.

Please check out the test page. Thanks.

[detech]

I’m confused, is there a way to keep the size of my columns (with the border as it currently is) but make them have a CARD inside that has a button inside the card and space the front of the card like how my other columns are. This would hopefully look the same visually only difference is it would flip to a backside.

I added the short code but don’t know how to position the content on the front of the card and make the button green like how my other buttons are without making them all green (I want to do them independently not use the theme options —> Button area which would be global.

[detech]

I got most of what I need however I though I can do something like the following to style the shortcode button I added. How can I size it and color it on the border like my other buttons.

.my-blue-button {
background-color: #000000;
color:#fff;
}

.my-blue-button:hover {
background-color: #f0f0f0;
color:red;
}

[ruenel]

Hello @detech,

If you put a button in the front content of the card, you cannot click on that button because as soon as you hover over the card, it will flip and display the back content. This is one of the reasons why the button is only visible once the card flips.

I am afraid that what you have in mind is not possible with the card element. With the current column setup, you can use the Effects module to animate the columns instead. Check out the test page in the secure note.

Thank you for your understanding.