Docs

[ajrenk]

http://clients.andyrenk.com/kocis/

[Friech]

Hi There,

Thank you for the screen-cast, for the first section height I saw this on your custom CSS.

#x-section-1 {
   min-height: 100vh;
}

Please update that to.

.home #x-section-1 {
	height: calc(100vh - 90px);
}

You might also need to remove the huge paddings that you applied on the columns.

That issue with the button seems to be happening only on small device (480px and smaller screens). Since that screen is too narrow for two buttons lets keep make it stack and centered. Add this on your custom CSS.

@media (max-width:  480px) {
	.home #x-section-1 .x-block-grid {text-align: center;}
	.home #x-section-1 .x-block-grid .x-btn.x-btn-square {margin: 0 !important;float: none;}
}

Hope it helps, Cheers!

[ajrenk]

You guys are SO GOOD! Thank you!

[ajrenk]

When I added the new CSS code… this is what it looks like on mobile… The first section overlaps the second…

[ajrenk]

Can you help with these too on mobile? Just trying to tighten it up…

Finally, can I change the CATEGORY ARCHIVE title to some thing like “CATEGORY NAME ARTICLES”.

[ajrenk]

Oopps! SHORT VIDEO

THANK YOU!

[Nabeel A]

Hi again,

– To remove the space from your first section and removing background image in smaller screens:

@media screen and (max-width: 767px) {
.home #x-section-1 h1 {
    margin-top: 0 !important;
}
.home #x-section-2 {
    background-image: none !important;
    background-color: rgb(0, 33, 66) !important;
}
}

– Your subscribe button looks good in iPhone, Can you please share a screenshot of the problem so we can take a closer look?

– Changing category archive text to something else for each category can be possible with some custom scripts. For example for your Leadership Category (which has the category ID 7) you can do this, get the category ID and use the following code:

jQuery(document).ready(function($){
	$('.category-7 .h-landmark span').html('Leadership');
});

For the Self Awareness category, you can replace the previous with this:

jQuery(document).ready(function($){
	$('.category-7 .h-landmark span').html('Leadership');
	$('.category-8 .h-landmark span').html("Self Awareness");
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ajrenk]

Thank you! Where do I put the JQuery code?

[ajrenk]

Thank you! Where do I put the JQuery code?

Also, attached is what I am seeing on the SUBSCRIBE button on iPhone 6 plus. Cuts off bottom border

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-block-grid {
    overflow: visible;
}

Don’t forget to clear cache.

jQuery codes should be added in Customize -> Custom -> Global JavaScript

Hope that helps.

[ajrenk]

Thank you!

One question on removing background from the section on mobile.

I added your code:

@media screen and (max-width: 767px)
.home #x-section-1 h1 {
margin-top: 0 !important;
}
.home #x-section-2 {
background-image: none !important;
background-color: rgb(0, 33, 66) !important;
}
}

But it remove the image background across all platforms…

[Nabeel A]

Hi again,

Just checked the code and it had a missing bracket, please update the code with this:

@media screen and (max-width: 767px) {
.home #x-section-1 h1 {
    margin-top: 0 !important;
}
.home #x-section-2 {
    background-image: none !important;
    background-color: rgb(0, 33, 66) !important;
}
}

Let us know how this goes!

[Author]

Posts