Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2767605
Featured slider on mobile
Closed

Comments

  • LanaABA started the conversation

    Hi! Is there a way to disable the featured slider on mobile but leave it on desktop and iPad?

    + I'd love to do the same for the header sign-up form.


    Thank you

  •  2,613
    PenciDesign replied

    Hi,

    You can disable them by using the following CSS codes:

    @media(max-width: 767px) {
    body.blog .featuredsl-customizer,
    body.blog .penci-header-signup-form {
      display: none;
    }
    }

    You can input them into option: Customizer -> Custom CSS

    Best Regards.

    PenciDesign

  • LanaABA replied

    Thank you! That worked.

    Now the only problem is a pretty big white space above the first image. Is there a way to remove it (make it smaller)?

  •  2,613
    PenciDesign replied

    Hi,

    You can add more the following CSS code to hide the space:

    @media(max-width: 767px) {
     .blog #header {
       margin-bottom: 15px;
     }
    }
    

    15px just is demo value and you can change it but I think with 15px element look very good. 

    Best Regards.

    PenciDesign

  • LanaABA replied

    Thank you! It worked :)

    I also noticed that when I click Pinterest social sharing button on the blog page it chooses the post's featured image for sharing on Pinterest and not the images inside the post (optimized for sharing on Pinterest - they are vertical and have necessary keywords). Is there a way to correct that? Thank you

    5623103762.png
  •  2,700
    PenciDesign replied

    Hi,

    It's sharing buttons on your blog layout - not inside single post pages. And on the layouts, we can't get all images inside your posts. It just can take the featured image.

    Best Regards,
    PenciDesign

  • LanaABA replied

    Okay, understand.

    Sorry, one more question :D
    Can I make these areas (marked with red rectangles) smaller?
    You've already helped me to get rid of the white space after header on mobile with this peace of code:

    @media(max-width: 767px) {
     .blog #header {
       margin-bottom: 0px;
     }
    }

    But the desktop version needs improvement too.

  •  2,700
    PenciDesign replied

    Hi,

    Why you don't build that page by use Elementor and you can do all of that for yourself?

    To do that, you can do follow steps:

    1/ Remove all the custom CSS code I sent for you before.

    2/ Go to Dashboard > Settings > Reading > Your homepage displays > on "Posts Page" > select "--Select--" 

    3/ Go to edit again your "Blog" > select Template for this page is "Page Full Width" ( check this image ) and use Elementor to config that page - check this video tutorial for more.

    And you can check this guide to know how to hide/show elements for mobile/desktop by use Elementor also.

    Best Regards,

    PenciDesign

  • LanaABA replied

    I am using Elementor for my home page, however, I decided not to use it for my blog page because I built it with the "Customize" option, so I use all built-in Soledad theme's blocks (i.g. post's layout, a sidebar), everything is adapting to a mobile screen nicely.
    I thought about paying for elementor and building a website with it but, in the end, decided to buy your theme because it's much easier to configure. And if I use "Edit with Elementor" option for my blog page, then I won't be able to go back to "Customize" theme editor.

    Is there a way to quickly edit this code to make it work on desktop as well:


    @media(max-width: 767px) {
     .blog #header {
       margin-bottom: 0px;
     }
    }

  •  2,700
    PenciDesign replied

    Hi,

    To make it works for desktop, please add more this code to make it works for desktop:

    @media(min-width: 768px) {
     .blog #header {
       margin-bottom: 55px;
     }
    }


    Best Regards,

    PenciDesign


  • LanaABA replied

    Tried adding your code but it didn't work.

    Also tried changing margin-bottom to 0px, however, it also didn't help. The margin on the page is still 60px. 

    I checked in another browser as well (safari, logged out from my admin account) and the margin is 60px, not 0px, for some reason.



  •  2,613
    PenciDesign replied

    Hi,

    Try add the following CSS code to your page:

    @media only screen and (min-width: 961px) {
        .penci-header-signup-form.penci-header-signup-form-below {
            margin-bottom: 0;
        }
        .featured-area {
            margin-top: -60px;
       }
    }

    Best Regards,

    PenciDesign




  • LanaABA replied

    Unfortunately, this code also didn't work, however, it gave me the idea and I managed to solve the problem :)

    Here is the code that worked:

    .featured-area {
      margin-bottom: 0;
    }

    .penci-header-signup-form {
    margin-top: 0;
    margin-bottom: 0;
    }



    NB: The code that you send me for desktop earlier made the main image overlap the menu line:

    @media(max-width: 767px) {
     .blog #header {
       margin-bottom: 0px;
     }
    }

  • LanaABA replied

    Hi again! One more question.

    I am trying to add a link to an image, however, as soon as I do it (with Elementor editor) the image becomes super small and I can't understand what's causing it and how to fix it.

    I want the image to be clickable. And I need it to be an .svg file.
    I added custom image size in the setting of the block and it works fine until I add the link :(

    Adding screenshots.

  •  2,613
    PenciDesign replied

    Hi,

    Please send me a related URL with this issue. I'll check and help you.

    Regards,
    PenciDesign.


  • LanaABA replied

    Hi! I don't have a page with this issue on my website https://www.escapepressed.com/ now.
    I tried to add links to .svg images on the main page but because they become super small I didn't apply the changes in Elementor and changed them to .png files for now. However, I need them to be in vector, that's why I hope, you'll help me to solve this problem.

    I showed what's happening when I try to add a link to an .svg image on the screens below. Did you see them?

  •  2,613
    PenciDesign replied

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .elementor-widget-image a img[src$=".svg"] {
        width: 100% !important;
        height: auto;
    } .elementor-widget-image a {
        display: block;
    }

    Regards,
    PenciDesign.


  • LanaABA replied

    Thanks a lot! It helped!
    I wanted to clarify one thing: I use your Page Speed Optimizer for my website and your support team helped me create the CSS files when I didn't have access to a Windows computer.
    I created new pages on my website and several of them are very important but their loading speed is slow (and after loading the first time the elements on the page move and the page starts reloading CSS once again).
    This happens on these pages:
    https://www.escapepressed.com/links/
    https://www.escapepressed.com/services/

    Can I create critical CSS for these particular pages as well? (I have access to a Windows computer now :) )
    Or is this feature working only for the types of pages that you mention in your documentation (homepage, single post, page, category)?

    Thank you!

  •  2,613
    PenciDesign replied

    Hi,

    • Yes. You can add your custom page URL to the Critical CSS Tools then regenerate critical CSS,
    • This tool work with all post types.

    Regards,
    PenciDesign.


  • LanaABA replied

    Hi! I noticed that with Header 3 social media icons and the woocommerce svg overlap the content of the page instead of disappearing on mobile devices.

    I switched to Header 2 for now, but I would love to fix the issue with Header 3.
    Thank you.

  • LanaABA replied

    Oh and I just realized that the critical CSS tool stopped working for my website. It probably happened after I asked Bluehost to change my URL from www.escapepressed.com to just escapepressed.com (because I used it earlier and it generated critical CSS for me).
    1. I tried pasting a link in the tool without "www" at first but it said that the domain is different.
    2. Then I tried adding "www" to the link of the page but it showed me an error.
    3. I tried re-logging into the tool using the new link of the website (without www and my purchase code) - it didn't work.
    But it's logging in with the previous link, just doesn't generate CSS.

    Could you, please, somehow renew my domain in your base to fix this? I really want to increase my website's loading speed.

    Thank you!

  •  2,613
    PenciDesign replied

    Hi,

    Please send me your site login credential in a PRIVATE reply. I'll log in and help you.

    Regards,
    PenciDesign.

  •   LanaABA replied privately
  •   PenciDesign replied privately
  •   LanaABA replied privately
  •  2,613
    PenciDesign replied

    Hi,

    I've checked your site. The critical CSS working properly.

    I've also assigned your license key to the new domain without WWW, please try to open the critical CSS tool then generate any page you want again.

    Regards,
    PenciDesign.