• 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!

    Valerie
    Participant
    Posts: 38
    April 11, 2019 at 11:34 pm #43450

    Ok, I will think of clearing the cache and deactivate the plugins next time I have a problem. You told me that before and it worked, it seems to be a basic stuff to do, but this time, only the buttons are ok now; so number 6/ is solved, but all the other problems are still there, as I mentioned in my first post: The bootstrap slider, the size of the images in the Librairie page which are really small, and the text is not going below these images (is it because I am using a table instead of columns?), and all the paddings and margins which are too large, and also how to justify the text in your tab widget.
    Thanks for helping! 🙂

    Roman
    Keymaster
    Posts: 3049
    April 12, 2019 at 9:16 am #43451

    1. That’s actually the parallax slider. You can set the title/description background color description under the slider settings in the Customizer. You can set it to display for tablet devices and smaller sizes in the options.

    2. The images are small, becuase they are inserted in smaller size, try insert bigger size. And yes, it’s because you are using tables.

    3. For the other questions – paddings/margins I would need to see which specific elements on the page

    Valerie
    Participant
    Posts: 38
    April 13, 2019 at 2:12 pm #43452

    Thanks Roman,
    I managed to solve some of the problems with your explanations. From now on, I will post about the remaining issues one after another.
    So, the parallax slider doesn’t display the description in the tablet and phones sizes, though it should according to the options in the customizer. The thing is that my titles don’t make sense without the description. Can you tell me what’s wrong?

    Roman
    Keymaster
    Posts: 3049
    April 14, 2019 at 10:58 am #43453

    Try this Additional CSS for the slider:

    @media (max-width: 991.98px) {
      #parallax-slider .carousel-caption h5,
      #parallax-slider .carousel-caption p {
          font-size: calc(1.375rem + 1.5vw);
      }
    }

    modify per your needs

    Valerie
    Participant
    Posts: 38
    April 14, 2019 at 2:07 pm #43454

    Well, I guess that when you say that I modify per my needs, you mean the font size?
    I tried, but the description still doesn’t appear…I also changed the H5 afterwards, but nothing happened: it’s like before.

    Roman
    Keymaster
    Posts: 3049
    April 14, 2019 at 7:13 pm #43455

    You might enable the description on the smaller sizes in the customizer

    Valerie
    Participant
    Posts: 38
    April 15, 2019 at 11:59 am #43458

    Hi,
    I don’t see any options to enable the description is the customizer. There’s only an option to enable the title and the background of both, and both are enable on Always. Any idea what’s wrong?

    Roman
    Keymaster
    Posts: 3049
    April 15, 2019 at 3:18 pm #43459

    Additional CSS please:

    #parallax-slider .carousel-caption p {
        display: block!important;
    }
    Valerie
    Participant
    Posts: 38
    April 15, 2019 at 5:11 pm #43460

    I tried on 2 devices after clearing the cache, and the description still doesn’t appear on tablet and phone sizes…

    Valerie
    Participant
    Posts: 38
    April 16, 2019 at 9:33 pm #43464

    Hi,

    I couldn’t find a solution for the description. Could you help?
    Besides, I’d like to narrow the paddings and margins of your tabs shortcode, as well as justify the text for phone and tablet sizes. I managed to justify it for bigger screen through the class .western, but it doesn’t work for smaller sizes.
    Thanks.