Topic Resolution: Resolved
  • Open
  • Valerie
    Participant
    April 7, 2019 at 11:06 am #43421

    Hi, I was checking my website on different screen sizes: tablet and smartphone, and I noticed some problems.

    1/ First, with the bootstrap slider of the front page. In the tablet and smartphone sizes, the image is centered, so we can’t see the text properly, plus this text miss some part: only the title is present. Is it possible to fix this or to make a different slider for these two sizes?

    2/ Then, the padding in the content section of these 2 screen sizes is too large. What is the class to reduce it?

    3/ Same with the margins in the content section, which are too big. How to reduce them?

    4/ In the “Librairie” page of the menu, which is the first menu item, the images are too small, only in the smartphone size. How to enlarge them?

    5/ Still in the “Librairie” page, I’d like the text to go under the image only for the smartphone size. Maybe it would solve the image size problem.

    6/ In the sub-pages, so sub-items of “Librairie”, the yellow and green buttons are too small. Can you tell me how to enlarge them?

    7/ Still in the sub-items of “Librairie”, I’d like the text of the content to be smaller for the smartphone size. What is the class to do that?

    8/ Then, a problems not related to the screen size: I am using your tab shortcode, and I would like to know how to justify the text in them and how to make it smaller in them for the smartphone size.

    9/ And finally, how to increase the padding in the widgets?

    Hope it’s ok if I am asking all these questions in one shot!
    Thank you!

    Roman
    Keymaster
    Posts: 3096
    April 17, 2019 at 10:47 am #43467

    Can you please provide WP admin login in Private reply for me to check? Thanks.

    Valerie
    Participant
    Posts: 40
    April 17, 2019 at 4:26 pm #43468
    This reply has been set as private.
    Roman
    Keymaster
    Posts: 3096
    April 17, 2019 at 8:14 pm #43470

    There are two options now. Modify the inc/template-tags.php file, this function evolve_parallax(), line #1267 change from:

    echo "<p data-animation='animated fadeInRight' class='d-none d-md-block'>" . esc_attr( $slide_data["evl_slide_desc"] ) . "</p>";

    to:

    echo "<p data-animation='animated fadeInRight' class='d-md-block'>" . esc_attr( $slide_data["evl_slide_desc"] ) . "</p>";

    Second option is use this custom function in child theme and use this modification there, or you will lose it in the next theme update.

    Where you use the tabs shortcode please?

    Valerie
    Participant
    Posts: 40
    April 20, 2019 at 10:09 pm #43479

    Hi,

    I changed the php file and it worked. But it was a different line and I had to do it in the cpanel, it didn’t work in WordPress. The whole text doesn’t appear in some slides, but I think I can solve this with what you wrote me previously regarding the font size. So, thank you for that!

    As for the tab shortcode, I use it in several pages. One example is : https://www.nouvellepensee.com/librairie/le-secret-du-succes-1908/

    Roman
    Keymaster
    Posts: 3096
    April 21, 2019 at 1:07 pm #43480

    Try this Additional CSS to adjust the layout you need:

    .componentz-tabs .tab-content {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    Valerie
    Participant
    Posts: 40
    April 23, 2019 at 9:00 pm #43482

    It is still too narrow on the phone size. Looks ridiculous with all the space on the sides. I also used text-align to justify the text but it doesn’t work for the tablet and phone sizes. Another idea?

    Roman
    Keymaster
    Posts: 3096
    April 26, 2019 at 7:41 pm #43488

    I added some Additional CSS, please check if it’s better. Thanks.

    Valerie
    Participant
    Posts: 40
    April 27, 2019 at 8:05 pm #43495

    Great! The padding problem is solved now, but the text was still not justifed. I added text-align: justify to your additional css and it worked. Thanks!! 🙂

    Ok, now, one last question and I leave you alone! :p
    How to increase the padding in the widgets at the bottom and on the side of this page?

    Nouvelle Pensée du Jour

    Thanks!

    Roman
    Keymaster
    Posts: 3096
    April 29, 2019 at 9:34 am #43498

    In Additional CSS you defined:

    .widget-content {
        margin: 0 0px 0px 0px;
        padding: 5px 2px 5px 2px;
        border: 0px solid #E0DDDD;
        border-radius: 5px;
    }

    You will need to modify the padding rule there per your needs

    Valerie
    Participant
    Posts: 40
    May 2, 2019 at 1:49 pm #43512

    Thanks a lot, it worked! 🙂