[cpjennmeakinParticipant]

I am trying to add custom CSS and add a CSS selector to a single image using Cornerstone, much like you can using Visual Composer. Here is the feature that I’m referring to in VC:

I’m not seeing the option to do this in Cornerstone – can you tell me where I can add this?

[DarshanaModerator]

Hi there,

Thanks for writing in! In the footer of your cornerstone, click on the middle button which then allows you to enable “Advance Controls”, so that you will see inputs for CSS IDs, classes, and inline styling appear.

Hope that’s clear.

[cpjennmeakinParticipant]

perfect – got it, thanks!

something that was missing for me there were some hovers that tell me what each of those icons are. maybe a good detail to add?

[DarshanaModerator]

Hi there,

I’m not sure what controls that you’re referring to. Could you please add little more information? (perhaps a screenshot). So that we can assist you.

Thanks!

[AndcomParticipant]

The advice above completely changes the way I was doing things, I did realise it was that simple. Super useful.

But it has give me the following conundrum:

Sorry to bother you again, based on what I have just learnt above, I am trying to recreate as per the middle iPhone / percentage image.

I am nearly there on the left, but it’s took hours to get this far.

Any chance you could advise with the css as to make close to the middle picture.

Thank you so much in advance

Link:

http://andcom-solutions.com/x-support-test/

[AndcomParticipant]

* not – did not

[FriechModerator]

Hi There,

At this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. Do you mean how to focus the background image horizontal position on the right? (the woman), If so you can update the background-position property to:

background-position: right 14px;

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps, Cheers!

[AndcomParticipant]

Sorry if I wasn’t more clear, please see the attached image.

The above however is useful to me also. Learning as I go along, thank you for the help.

Thank you.

[JadeModerator]

Hi there,

Thanks for providing us with clear details.

To accomplish that, kindly adjust the padding of the section where you have attached the phone background image to 0 35px 0 35px and under the Style option, add background-size: 100%;. This should make the background image fit to the column and resize the counter element.

Hope this helps.

[AndcomParticipant]

So the counter I have added the following CSS:

background-color: black; padding: 0px; background-size: 100%;

The Column I have the below padding and CSS:

120px 06 30 60

background-color: black; padding: 0px; background-size: 100%;

Which is got me there in 50 % of screen sizes, but at full screen and tablet the % are to high up into the top of the background picture or the % boxes resize badly.

How can I make the two resize better together I’m guessing I could ad a couple of CSS @media instructions, to keep them more in line a say a handful of resolutions (i.e the apple). Am I on the right track or is there an easier way?

If not please add the CSS here and I’l work out all the resolutions (assuming my logic is correct).

Thank you so much again. I will be buying another theme soon, the support is worth cost 10 fold.

[LelyModerator]

Hello There,

Please note that the text will not fit on your column with the image background. We have to decrease it’s font size for it to fit.
1.) Please reduce the height of GAP element to 90px from 150px;
2.) Also reduce column padding: from this : padding: 0px 100px 0px 100px; to this padding: 0px 35px 0px 35px;
3.) Add the following CSS via Appearance > Customize > Custom > CSS:

.page-id-839 .x-counter .text-above {
    font-size: 10px;
}
.page-id-839 .x-counter .number-wrap {
    font-size: 19px;
}

4.) Below the counter, please add another GAP element with 10px height.
The result is this:

Hope this helps.

[AndcomParticipant]

Hi, thank the above helped, but I am still stuck that in tablet and mobile view the gap needs to change at certain sizes. What I would look to create is the below.

At 1200px and up the gap top gap should be 120px

At 767 – 1200px the gap top gap should be 90px padding of % box 25px

I’m guessing I can use the CSS:

@media commands. Can you just advise what CSS code I nee to add.

Thank you in advance.

[RupokMember]

Hi there,

Thanks for updating. You can define the media query like this :

@media only screen and (min-width: 1200px) {

// Your code here

}

@media only screen and (min-width: 768px) and (max-width: 1199px) {

// Your code here

}

Hope this helps.

Cheers!

[AndcomParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
    background-repeat: no-repeat;
}

@media (min-width:1401px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        height:255px;
    }
}

@media (max-width:1400px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        height:20px;
        padding:9% 2.8% 8%!important;
    }
}

@media (max-width:1200px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:0px;
        height:20px;
        padding:110px 35px 90px!important;
        padding:9% 2.8% 8%!important;
    }
}

@media (max-width:1100px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:0px;
        padding:110px 35px 90px!important;
        padding:9% 2.8% 10%!important;
    }
}

@media (max-width:767px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:px;
        padding:30% 9% !important;
    }
    .page-id-30 div#x-section-1  .x-counter .number-wrap {
        font-size: 70px
    }
    .page-id-30 div#x-section-1  .x-counter span.text-below {
        font-size:25px        
     }
}

@media (max-width:600px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:px;
        padding:30% 9% !important;
    }
    .page-id-30 div#x-section-1 .x-counter .number-wrap {
        font-size: 50px
    }
    .page-id-30 div#x-section-1 .x-counter span.text-below {
        font-size:20px        
     }
}

@media (max-width:480px){
    .page-id-30 div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:px;
        padding:30% 9% !important;
    }
    .page-id-30 div#x-section-1 .x-counter .number-wrap {
        font-size: 40px
    }
     .page-id-30 div#x-section-1 .x-counter span.text-below {
        font-size:14px        
     }
}

.page-id-30 a.x-creative-cta.slide-bottom {
    padding:15px 0!important;
}

.page-id-30 a.x-img.x-img-link.x-img-none {
    margin-bottom: 0;
}

.x-subscribe-form input[type="submit"] {
    margin: 0 0 0 50%;
    width:50%
}

.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    border: 1px solid #000;
    border-radius: 0;
    height: 44px;
    width: 150%;
}

form#x-subscribe-form-259 {
    max-width: 100%!important;
}

Please note that since the are so many elements that need to responsively adjusted, we may not be able to assist you with making things exact. Getting things to look perfect may need some custom development, which is beyond our scope of support. Thank you for understanding.

Hope this helps – thanks!

[Author]

Posts