Docs

[Tristan A]

Hi there!

I want to position three elements vertically within a row. I have assigned classes to the row and the elements to do so, and was hoping I could use the following CSS to do so.

.tocbox .x-container {
background: #f5f5f5;
height: 230px;
}

.single-post .tocbox .x-container {
    position: relative;
}
.single-post .tocbox .x-btn {
    position: absolute;
    bottom: 25px;
    max-width: calc(100% - 4.5em);
}

.single-post .tocbox .tocsubtitle {
   font-family: Lato; 
line-height:14px; 
font-weight:100; 
font-size:14px;
     position: absolute;
margin-right: 30px;
  top: 45%;
}

.single-post .tocbox .tocheadline {
font-family: Lato;
line-height:16px;
font-weight:800;
font-size:16px;
position: absolute;
margin-right: 30px;
top: 15%;}

Unfortunately, the positioning doesn’t work. I think I am targetting the row incorrectly. Any thoughts?

The idea is that the .tocheadline class sits at the top, the .tocsubtitle sits in the middle and the button sits at the bottom of the row with class Toc.

[Tristan A]

This reply has been marked as private.

[Jack]

Hi there Tristan,

Hope you’re well today and thanks for writing in.

The issue appears to be the class names, as classes are case sensitive, in your CSS, you have them all as lower case, but your headline class is:

.TOCheadline

Your subtitle class is:

.TocSubtitle

And your button is:

a.x-btn.black-btn.Tocbtn.my-btn.x-btn-square.x-btn-mini.x-btn-block

Personally I’d recommend renaming the headline and subtitle class to lower case. 🙂

Hope this helps.

Thank you!

[Tristan A]

Aaahhh…. naming conventions… you’re absolutely right!

So i fixed that and fiddled around with the code some more. It is now starting to look good on large screens with following CSS:

.tocsubtitle {
   font-family: Lato; 
line-height:14px; 
font-weight:100; 
font-size:14px;
}

.tocheadline {
font-family: Lato; 
line-height:14px; 
font-weight:800; 
font-size:16px;
position: absolute;
  top: 0%;}

.x-container .tocbox  {
height: 180px;
}

.single-post .tocbox .tocsubtitle {
   font-family: Lato; 
line-height:14px; 
font-weight:100; 
font-size:14px;
     position: absolute;
  top: 165%;
}
.single-post .tocbox .x-container {
    position: relative;
}
.single-post .tocbox .x-btn {
     position: absolute;
  top: 400%;
    max-width: calc(100% - 4.5em);
}

I have 3 questions remaining:

1. First, despiting having center text on in Cornerstone, AND adding the class “center-text” the texts won’t center in the white area. How to do that?

2. When resizing to a mobile screen size, things go horribly wrong. I probably should limit the size of the image with CSS as well. What should I add to the code?

3. You probably saw that the positioning with the above CSS is quite clumsy ( I think…???). Is there an easy, more foolproof way of doing it?

URL and credentials off course still the same.

Thanks!

[Paul R]

Hi,

Can you provide as an image on how exactly you would like it to look like.

Thanks

[Tristan A]

This reply has been marked as private.

[Tristan A]

Please note that the row has a 2/3 + 1/3 layout, with the 1/3 for placing the picture. I had actually expected to ‘break’ across the screen in mobile to look like the picture.

[Jack]

Hi there @Tristan,

Thanks for the additional information.

The image can be controlled with the following css:

#ToC img.x-img.x-img-none {
	// Your css here
}

The text won’t center for me either, it seems that it’s conflicting rules with the custom headline and the custom toc classes. Instead try the following:

.single-post .tocbox .tocsubtitle {
	margin-left: 55px;
}

I’d then recommend modifying the code with media queries to make sure everything displays correctly on mobile. There’s a great guide on common media queries here https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints 🙂

Thank you!

[Author]

Posts