image switch space removal

[Sergio Torres]

Hi. How can i remove the space bellow this image switch? In attachment. Thank you

example.jpg

[Nodari]

Hi Sergio

Try to use thi css code:

.mk-image-switch.fading-animation .image__container img {
height: inherit;
}

and check again,

Code can be added in the Page css setting https://prnt.sc/11k15u6

Thanks

[Sergio Torres]

Hi. It seems to be streching the images instead of using they real height. in attachment print. Thank you

example.jpg

[Amir Rather]

Please try the below CSS instead:

.mk-image-switch .image__container {
    height: auto !important;
}
.mk-image-switch {
    height: auto !important;
}

[Sergio Torres]

Hi. better but still a white space between the rows. In attachment.

example.jpg

[Amir Rather]

Hi There

I added the below line of CSS as well, please check now:

.theme-page-wrapper:not(.full-width-layout) .mk-fullwidth-true.vc_row .vc_col-sm-12 {
    margin-bottom: -4px;
}

Regards

[Sergio Torres]

Hi. It worked. Thank you. I wasn’t able to sign in to answer this post, don’t know why. But was able now. Still related to this website, is it possible to pass from one image to the other in this diagonal shape divider without having color between? I tried without color but it doesn’t show the diagonal change between them. In attachment

untitled-1.jpg

[Tatyana Hutsol]

Hello,

 

Sorry for a delay.

Unfortunately it can’t be set without color.

You may try using the colors that are familiar with the colors in your images.

Thank you for understanding.

 

Regards.

[Sergio Torres]

Hi. About this, there’s still a space in between image switch. in attachment. Can you please check why? Thank you

untitled-3.jpg

[Nodari]

HI there

Should be fixed now, I used this css code:

.mk-image-switch .image__container {
    height: auto !important;
}

Regards

[Sergio Torres]

Hi. Didn’t work. Print of css in attachment. Thank you

untitled-3.jpg

[Nodari]

Good morning Sergio

Sorry, I was not able to access your site today,
its my mistake in the CSS code, please use this css code instead and it will fix your problem:

.mk-image-switch .image__container {
     display: block !important;
}

Thanks

[Sergio Torres]

Hi. It didn’t work. Thank you

[Nodari]

Good morning Sergio

First of all, thank you for your patience, its appreciated 🙂

Hm, strange, but I see it’s now fixed from my side? https://prnt.sc/19dzbwc maybe you did not clear the cache?

Thanks again

[Sergio Torres]

Hi. I see it ok too. thank you. can you tell me how to remove this space in mobile version? In attachment

[Sergio Torres]

i don’t see the attachment so here it goes again

untitled-8.jpg

[Nodari]

Hi Sergio

You want to entirely hide the selected section on the screenshot or just a hide section under the buttons? https://prnt.sc/19ny240

Regards

[Sergio Torres]

Hi. Just under the buttons. Thank you

[Alexander Hutsol]

Hello,

 

Please add this code in Theme Options > Advanced > Custom CSS:

@media (max-width: 480px){#gallery-loop-36 {
margin-top: -100px;
}}

 

Regards.

[Sergio Torres]

Hi. It didn’t work 🙁

[Tatyana Hutsol]

Hello,

 

I added “!important” to the code:

@media (max-width: 480px){#gallery-loop-36 {
margin-top: -100px !important;
}}

Now it’s applied.

Please check.

 

Regards.

[Sergio Torres]

perfect. Thank you

[Tatyana Hutsol]

You’re welcome.

Regards.

[Sergio Torres]

Hi. On this website on page https://webworld.pt/gymnasium/ginasio-faro/ how can i put in mobile this content (old.jpg) like in attachment new.jpg? Thank you

new.jpg old.jpg

[Mohsin Al-Rabieai]

Hi Sergio,

You need to make sure your mobile version of the columns have 1/2 (6/12) width. Check the Width and Responsive option of the WPBakery columns here:

Column Settings in WPBakery Page Builder

and here:

Responsive Settings

This question can be addressed very well if you know how to work with WPBakery.

Bests

[Sergio Torres]

Hi. On the homepage the anchors links on mobile don’t seem to work. they work on desktop reducing the screen but in mobile device no. I also tried creating a new page section with different id but still not working. It’s the purple rectangles that say clica aqui para uma experiência grátis. Thank you

[Mohsin Al-Rabieai]

Hi Sergio,

They actually work, however they are not smoothly moving to the anchor point. The reason is that you have two anchor links for each position. On the desktop version, you have this CSS class added to the link:

class="js-smooth-scroll"

While on the mobile version, you don’t have this CSS class. This CSS class will make every link to smoothly scroll to the anchor point. So, just adding this to the links like the screenshot would do the job.

Hope it helps 🙂

smooth-scroll-class.png

[Sergio Torres]

perfect. that fixed it. thank you

[Alexander Hutsol]

Hello,

You are welcome 🙂

Feel free to create a new topic if you have any other questions.

 

Regards.

[Author]

Posts