X theme top carousel features + 2 issues

Support
#1

Hi

I have two websites where I use X theme and the Ethos stack.

One: www.mysardiniaholidays.com
two: Cleliamattana.com

the second one has the features modified (probably in the global CSS with your help? Sorry it’s been a while since I did it)

I would like to replicate some of the features modified on my first one

  1. The carousel on top with the posts, in the second it shows the whole title, in the first only a part of it and then it gets truncated. I’d like to have the whole title in the first too.

Example of what I want: https://cleliamattana.com/beauty-routine-anti-eta-antirughe-prodotti-viso-da-giorno/)

Example from the other website: https://www.mysardiniaholidays.com/south-sardinia-things-to-do-activities/

  1. in the sidebar on www.cleliamattana.com the titles are orange boxes with white writing. I’d like to have the same format on the first, only using another color of my choice if possible (a particular blue)

You can see what I mean from the 2 examples I put earlier.

I’m also having 2 issues to resolve on the www.mysardiniaholidays.com:

1) The home page: I was trying to add a button on the intro and after I saved it in Cornerstone, live I can’t see the intro anymore.

On the Italian version I haven’t tried and I still see the intro

below the images of the issue:

How it should be in the English version (I took it from the Italian one):

How it actually is in the English version after adding the button underneath the orange writing:

The intro with my photo and the writing on the right disappeared and it goes straight to the next block. Why does this happen and how can I fix it?

2) The mobile version:

In the mobile version of www.mysardiniaholidays.com the text goes straight to the edges of the mobile, there is no “container” and it’s not nice to see,it doesn’t happen on the other website using the same theme and stack www.cleliamattana.com

Can you help me in fixing this?

Thanks

There are other issues on the footer on all my 3 websites but I’ll open a different ticket.

#2

Hello Clelia Mattana,

Thanks for the very detailed post information.

1.) To extend the post titles, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.h-entry-cover {
    top: calc(100% - 6em);
}

.h-entry-cover span {
    overflow: visible;
    white-space: normal;
}

2.) To change the background color and text color of the widgets in your sidebar, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-sidebar .widget .h-widget {
    background-color: #F16B23;
    border: none;
    color: #FFFFFF;
}

Feel free to change the colors.

3.) There is a JS error on the page. It came from this code which have been added to the header:

<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-0227233160279409",

<!-- Hotjar Tracking Code for https://www.cleliamattana.com -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:1583959,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Please remove the code and make sure that it is the correct one when you got it from the source.

4.) The text goes to the edge of the browser because you have this custom css:

.x-container.width {
    width: 100%;
}

If you need this code, please have it updated into this:

@media(min-width: 979px){
  .x-container.width {
    width: 100%;
  }
}

We would love to know if this has worked for you. Thank you.

#3

Hi Thanks a lot for guiding me into this process, it really helped!

So, I solved half the issues :slight_smile:

  1. I couldn’t find the .x-container.width {
    width: 100%;
    }

(I was looking in the global CSS)
So I just added the new code hoping to override it but to no avail. Can you indicate which line I can find the CSS I need to remove? Thanks!

  1. I am pretty sure the JS on the page are correct (they are for tracking and advertising and are the same on every page, including the Italian one where everything is fine) But to try the theory I deleted them to no avail, still my photo and intro is missing. I cleared the caches but nothing happened. Weird, any suggestion?

For the rest, everything worked perfectly, thank you!

#4

Hi Clelia,

  1. Your Site Width is set to 100% that is why the ROWs’ are occupying the entire width. Please navigate to Theme Options > Layout and Design and adjust the Site Width.



  1. Please recopy/recheck those JS codes to make sure it is correct, from what I see on the code above, it is missing a closing </script> tag.

Thanks,

#5

Thank you!

so now I’ve resolved 90% of the issue in this thread :slight_smile:
I changed the settings and now the mobile version is fine.

For the other issue, I even deleted the whole code from the page! So i doubt it’s that even if it was wrong, given that I deleted it (in both versions, English and Italian home page)

I found something different instead… what if it’s a layout issue? when i go to customize I can see the full page, like in here:

But! And this is the weird thing… if i use the button to see the full page while still in customization, the first part disappears like it does when I save the page.

How is this possible? The part of the page missing (photo message and now button with “request a consultancy” is there, as you can see, but it disappears when full screen? Doesn’t make any sense?

I used cornerstone for the English page and VC (because WPML wouldn’t translate the cornerstone blocks properly) on the Italian version.

Also the weather bar is nicer in the Italian version (full screen) while in the english version is like inside a container?

Thanks for your help as usual!

#6

Hello Clelia Mattana,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#7

After a few trial and error I found the secure note. Thanks for letting me know what the issue might be!

#8

Hey Clelia Mattana,

Please edit your previous reply or your original post and you will find that secure note button I am showing in the screenshot.

Thanks.

#9

Hi

I did find the secure note, is on my previous message, can’t you see it?

#10

Hello Clelia Mattana,

I was able to log in to your site. It seems that you haven’t translated the page with WPML correctly. When I edit the homepage in English, I can see the page in the preview. If I try to edit the German or Italian, nothing displays in the preview. Please check out this detailed instruction how to translate a Cornerstone built pages with WPML.

If you already did the steps then I would recommend that you translate it again using the Flags at the bottom right corner in the preview editor.

You may do the following:

  • Please edit your English page in Cornerstone.

  • Once you are done editing and ready for the translation, save your page as a Cornerstone template.

  • Duplicate the page for translation as what have instructed in WPML.

  • Edit the newly duplicated page in Cornerstone. Now you will seeing the missing elements or sections then.

  • Load up the saved Cornerstone template and then you are now all set for the translation of the page.

To know more about how you can save the page as a Cornerstone template, please check out “Working with Templates” section from this article: https://theme.co/apex/forum/t/cornerstone-content-builder-layout/122/

And know more about the template manager from here: https://theme.co/apex/forum/t/template-manager/20364

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.