[seopublicationsParticipant]

I can’t resize the slider in cornerstone on my pages. How do I do this?

[John EzraMember]

Hi there,

Thanks for writing in! How are you trying to resize the slider? The slider fits within it’s container. You can use smaller columns or adjust settings with the slider plugin itself. Other than that you will need CSS customization. We can assist here to some degree but we will need to know what you would specifically like to achieve.

Do update us – thanks!

[seopublicationsParticipant]

OK this code works great except I need to add an id for only one slider on the page to be set to this style, yet all the id code I have found to rectify this does not work.

Here is the code that is working for all sliders on the page:
http://testtwo.corporatephotobooths.photography/pricing.html

This works fine for the first slider on the page but that is the only one I want it to work for:

.x-flexslider .x-slides img {
width: 75%;
}
.x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

If I add and id it looks something like this:

#some-column-id .x-flexslider .x-slides img {
width: 75%;
}
#some-column-id .x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

Then I put some-column-id in the ID box on the slider inspector panel.

Where am I going wrong?

Damo

[RupokMember]

Hi Damo,

Thanks for writing back. Can’t find the ID on any slider as I am not sure where you actually applied that ID. However you can try placing this to the ROW or section that contains the specific slider as you are using this as parent selector.

Cheers!

[seopublicationsParticipant]

I am not sure how to explain it further. I am pretty new at this but I did say I put the ID:

some-column-id

in the slider style box

I tried the same code in the Row and Column style box on the side panel but nothing works.

If I paste this code in the slider custome css it works for all of the sliders on the page but I just want to manipulate one slider on the page:

.x-flexslider .x-slides img {
width: 75%;
}
.x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

I am not familiar with css, specifically id’s so not sure how the syntax is constructed or how to implement it in cornerstone.

[RupokMember]

Hi there,

Could you point us the slider (where you have placed the ID) with a screenshot so that we can check and provide you the tailored code?

Cheers!

[seopublicationsParticipant]

Here are the images for the Custom CSS and the ID box in the slider element or inspection box

[RupokMember]

Hi there,

As you are adding the ID to the slider, your code should be like this :

#some-column-id.x-flexslider .x-slides img {
width: 75%;
}

#some-column-id.x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

That is, remove the space between selector since they are same selector NOT parent.

Cheers!

[seopublicationsParticipant]

I have tried it both ways and neither work – you are talking about a space between (id) and (.x) I am assuming.

Yes, as I showed you in the last post with my image and I have attached it here again, I put the id in the Slider ID box. What is the exact ID I should be putting in there:

#some-column-id
or
some-column-id
or
some

Please let me know what code and where to put it.

[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

[seopublicationsParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Damo,

Thank you for the credentials. Upon checking, the slider ID is just some. Then the CSS is this:

#some-column-id .x-flexslider .x-slides img {
width: 75%;
}
#some-column-id .x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

Your CSS declaration and the ID doesn’t connect. Either update the CSS to just this:

#some .x-flexslider .x-slides img {
width: 75%;
}
#some .x-flexslider-shortcode-container {
width: 85%;
float: none;
margin-right: auto;
margin-left: auto;
}

Or if you don’t want to update the CSS, update the ID field to this some-column-id. It should be the same.

Hope this helps.

[seopublicationsParticipant]

Great thanks, I don’t know why I could have sworn I tried it so many different ways but now I have got it. Thanks for being patient and very clear in your explanations.

Damo

[RahulModerator]

You’re welcome! Good luck! 🙂

[Author]

Posts