Docs

[belayachimarouane]

Hello,

I tried putting out a JS code to replace the logo already defined in the customisation tab with another one when scrolling.
However the code doesn’t work.

I work on local host and I use integrity.

Thank you

[Joao]

Hi There,

Could you try this snippet, please add it to your Customizer / Javascript and replace the SMALL LOGO FILE with your logo url

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','SMALL LOGO FILE.PNG');
       }
});

});

Let us know how it goes

Thanks,

Joao

[belayachimarouane]

Hello! Thanks a lot.

One more thing. The scroll down anchor takes me to the next row automatically, however it’s a full height row and I want it to stop in it instead of stoping before it.

Is it possible with CSS ?

Thank you

[Friech]

Hi There,

Is there a chance that you can upload the site on staging environment, so we can take a closer look?

Thanks.

[belayachimarouane]

Hello,

I have done it here : http://www.garcondusiecle.com

but please ignore my first thread as I have solved it.
The big problem is that I am having big trouble with responsiveness (only for different laptop and desktop screens as I am developping a landing page for mobile)
It gets very messy when I try it on different screen resolution and I don’t know why… Is there any better CSS practices for images and centering elements inside the columns ? That have been my biggest struggle…

Any suggestions ?

Many thanks!

[belayachimarouane]

I wonder why the text isn’t responsive too..

[Joao]

Hi There,

You could try setting up your font-size using : em instead of pxs.

And your paddings and margins using % instead of px

px is an absolute measure while the others will change accordingly to your screensizes.

Once you have done that, let us know if you are still experiencing layout issues and we can help you with some css and media queries if necessary.

You also have an option in Cornerstone where you can hide sections according to the screen sizes at the very bottom of the section tab.

If you are interested on learning about how to apply different CSS to elements of your website according to the screen size you can read a bit about media queries it is a very powerful resource that allow great tricks on this responsive world 🙂

Let us know how it goes.

Joao

[belayachimarouane]

Hello,

Thank you for getting back on this issue.
The problem is that I am using full height sections with 100hv so I need pictures to fit that size that’s why giving a height of 100% to picture wouldn’t work I guess..

Thank you

[Rue Nel]

Hello There,

Please edit your page and make sure that your margin, padding, heights, etc. that is in vh should only be applied to larger screens. The best recommendation I could give you is to add a custom class to the elements which you do have and use something line this:

@media(min-width: 980px){
  .secs {
    height: 92vh !important;
  }
}

Having it this way will ensure that the vh will only be applied to screen larger than 980px.

You can also apply the responsive text to your custom headline and manage it in Settings > Responsive Text. To know more about the responsive text and how you can properly apply it, please check it here: https://community.theme.co/kb/shortcode-walkthrough-responsive-text/

Hope this helps. Kindly let us know.

[belayachimarouane]

Thanks a lot! I will read more about the responsive text!

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts