[FabienRParticipant]

Hi!

I try to put a text over images on cornerstone using css. I found a lot of topics on the forum and tried on my own but I wasn’t able to make it work.

See the first pic “goal” to see the result i want to achieve.

I was able to make the “Artists” text to be over the first image on cornerstone, but i don’t know why, it doesn’t keep that position once i’m on the website in Chrome.

The URL of the website is : http://www.ensoulrecords.com/WP/

Thanks!

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[FabienRParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for the credentials, remove the paddings and margins you applied on that section and on its rows and columns. Also make your heading a Custom Headline element (not a text element) and apply the class in there and do not position: absolute; it. Put a negative margin on the second row to get the overlay effect instead.

Please refer to this sample page: http://www.ensoulrecords.com/WP/?page_id=286

This is the CSS I applied on that page:

.artists-title {
	font-family: "Source Sans Pro";
    color: #FFFFFF;
    font-size: 224px;
    font-weight: 900;
    letter-spacing: 34px;
}

Let us know how it goes.

Cheers!

[FabienRParticipant]

Hi!

Thanks! It worked really well! Now i’m trying to make it work on mobile. It is ok with the size of the images and text, but i can’t get the SHAM text to be at the right place, in the vertical center of the 1/3 column and in the horizontal center of the row.

The SHAM text is positionned above the image and not on the same line. See the screenshot attached!

Thanks for your help, it’s really appreciated!

Fabien

[FriechModerator]

Hi There,

I’m sorry but I’m having trouble styling that section because of the current CSS applied to it. Would you mind making it a one column row? And writing the image and name in html

<img src="http://www.ensoulrecords.com/WP/wp-content/uploads/2016/08/artistes-DoMi.jpg" class="img-domi" alt="Domi" /><h1 class="domi">DoMi</h1>

<h1 class="sham" >DoMi</h1><img src="http://www.ensoulrecords.com/WP/wp-content/uploads/2016/08/artistes-Sham.jpg" class="img-sham" alt="sham" />

You can paste that on a RAW content element.

You can use the test page I made earlier, to keep your current home page.

Thanks.

[FabienRParticipant]

Hi!

I managed to get this work just fine. Thanks! You rock!

But now I have an other issue (i’m pretty sure it won’t be the last…), concerning the recents posts element.

1) I have a gap at the right of my recents post element, it’s not a margin or a padding, so I don’t know how to suppress it. I want the recents posts element to be aligned in the center and with that gap it’s not possible.

2) I would like to display the full title of the posts, on two lines if it doesn’t fit on just one.

You can see the screenshot, the red block shows the unwanted gap, and on the first post the title is cropped.

Thanks a lot again!

Fabien

[Nabeel AModerator]

Hi again,

1. To remove the gap you can add the following code in your Customizer:

.x-recent-posts a.x-recent-post3 {
    width: 32.3% !important;
}

2. To fix titles of the post add this code:

.x-recent-posts .h-recent-posts, .x-recent-posts .x-recent-posts-date {
    text-overflow: initial !important;
    white-space: normal !important;
}

Let us know how this goes!

[FabienRParticipant]

It works just fine! Thanks a bunch!

[Prasant RaiModerator]

You are most welcome. 🙂

[FabienRParticipant]

Hey! Long time no see! 😀

i’m still having huge headaches trying to make all I want in my website. But i’m getting better, thanks to your help!

This time i’m having an issue with the recent post element. I’m displaying 3 news in a row, and want it to switch to column only on mobile devices in portrait. For instance, with an iphone 6+, in landscape, the 3 recent should be displayed on a single line, but in portrait they should be stacked in column.

For now, in landscape, I have HUGE elements displayed in column. I tried to resize them but it didn’t worked properly, I got alignment issues. In portrait, it’s ok, they are in a column, but still, i would like to resize the image and the excerpt to be smaller. see screenshots attached

Thanks!

Fabien

[ChristopherModerator]

Hi there,

Please find this code :

.x-recent-posts .x-recent-posts-img {
    max-height: 340px !important;
    padding-bottom: 100% !important;
    display: block !important;
}

And update it to :

@media (min-width:979px){
.x-recent-posts .x-recent-posts-img {
    max-height: 340px !important;
    padding-bottom: 100% !important;
    display: block !important;
}
}

Hope it helps.

[FabienRParticipant]

Hi!

Thanks for your answer, but unfortunately, it’s not changing anything :/

[FabienRParticipant]

nevermind, I managed to make it work! Thanks for your help 🙂

[JoaoModerator]

Hi There,

Thanks for letting us know, glas you figured out 🙂

Joao

[Author]

Posts