Docs

[JfantasyBooks]

Hello Again!,

Details:

Name: JFantasyBooks
Site: Fantasy-Books
Site Url: https://fantasy-books.live
WordPress Version: 4.7.1
X Version: 4.6.4
Cornerstone Plugin Version: 1.33

Problem:

I have 2 concerns.

1. First, I would like to be able to design the content dock to fit a 336 x 280 content.

The problem is you must set the width manually, unlike the height, and it must be in increments of 10, from 250 – 450. There is no way it can be 336 exactly. That being said, there is also inner padding between the content and border of the content dock.

So, I would like to use the padding in combination with this 10 incremented manual width to get the inner space to be 336px in width.

I am doing this because the content is dynamic. And it’s size changes depending on the space it’s given. I want the space it’s given to be 336px x 280px.

I do not wish to set the content manually to this size. I have done that currently, but this method does not fit with my future designs.

With that said, that brings me to the second concern.

2. I would like to display the content dock when it’s on mobile. And for the height and width to be set as some (x px), where x is some integer. This is because as I’ve said before, the content within the content dock will be dynamic. It changes form by the space allotted to it. I wish for the space to be smaller, and thus, the content appearing on mobile devices will be smaller as well.

PS: (I have seen that in 2015, content dock was made to work on mobile too, so I assume it it’s default is inactive, so can you show me the css to activate it?)

Can you help me with this?

Thanks.

[Rad]

Hi there,

Thanks for writing in.

You mean 2015 theme? I don’t remember seeing content dock in 2015, maybe it’s part of another plugin.

1. You mean static width for inner content? I guess yes, please add this CSS.

.x-content-dock {
    width: calc(336px + 10px) !important;
    height: calc(280px + 10px) !important;
}

.x-content-dock > .widget {
    width: 336px !important;
    height: 280px !important;
}

Though, creating static height might not be a good idea. Unless content respond to that.

2. And this is for tablet and mobile

/* tablet */
@media ( max-width: 979px ) {
.x-content-dock {
    width: calc(336px + 10px) !important;
    height: calc(280px + 10px) !important;
}

.x-content-dock > .widget {
    width: 336px !important;
    height: 280px !important;
}
}
/* mobile */
@media ( max-width: 767px ) {
.x-content-dock {
    width: calc(336px + 10px) !important;
    height: calc(280px + 10px) !important;
}

.x-content-dock > .widget {
    width: 336px !important;
    height: 280px !important;
}
}

Just change the sizes accordingly.

Thanks!

[JfantasyBooks]

I applied the code for the desktop.

It seems it’s smaller than the content. The content is set to 336 x 280. I did that so I could gauge if it worked, but it seems the inner space for the content of the content dock is very small now.

[Rad]

Hi there,

You said it’s 10px padding 🙂 , I checked it and it’s 30px.

Changing this calc(336px + 10px) to this calc(336px + 30px) should do it. Same to the height.

Also, what I’m seeing on my end is differently. The ads are based on visitors location and preference. Hence, I’m seeing a really big ad.

Cheers!

[JfantasyBooks]

Oh that worked nicely, but the content Dock doesn’t appear on mobile. Any ideas on why?

[Nabeel A]

Hi again,

The Content Dock is visible on displays larger than 767px and will be hidden on any displays smaller than this. This is for numerous usability reasons, which mostly have to do with ensuring that your site’s primary content is always accessible and not completely hidden by the Extension and that the close button is not inaccessible.

Thanks!

[JfantasyBooks]

I am aware. I would like to override that so that it does appear.

[Nabeel A]

Hi again,

To display the Content Dock in smaller screens please add the following code in your Customizer:

@media screen and (max-width: 767px) {
    .x-content-dock {
        display: block !important;
        width: 94% !important;
        left: 3% !important;
    }
}

Please note that this isn’t a feature of Content Dock therefore we will not be able to support any issues that might arise from modifications made to this area.

Thank you for your understanding.

[JfantasyBooks]

Noted; Thank You.

It works well for the what I am using it for. Everything turned out perfectly. It’s dynamic, and it functions and looks well.

Thank You X theme Team!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts