Help with Responsive Design

Home › Forums › Jevelin Theme › Help with Responsive Design

Home › Forums › Jevelin Theme › Help with Responsive Design

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    RESOLVED Posts

  • iancdma
    Participant

    Hi!

    A lot of the elements on my website are breaking on screen sizes MD and below. Could you please help me with pointers on making my website responsive?

    Shufflehound Support
    Moderator

    Hi @iancdma,

     

    I hope you are well today and thank you for your question.

     

    Could you please share me the screenshots of the responsive issues so that I can troubleshoot it?

     

    Best regards,
    Shufflehound team

    speciaali
    Participant

    (Jevelin 4.2.0) Might be because in Portfolio section now has empty space between images…

    Shufflehound Support
    Moderator

    @speciaali Could you please share me the screenshot of it and also share page URL from your site where it is displaying so that I can troubleshoot it?

    iancdma
    Participant
    1. Notice on top breaks on mobile
    2. Testimonial style 5/6 breaks
    3. Conference gallery does not show up at all
    4. Expanded pricing table does not display well

    And buttons magically disappear on mobile for some reason. Help please.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    This can be due to the custom CSS code that you have used on your site.

     

    Please remove all the custom CSS code that you have added in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    Also, it seems you have used custom CSS code on your site generated by Yellow Pencil editor so please try removing the CSS from your site as described in the below pages.

     

    https://yellowpencil.waspthemes.com/docs/managing-changes-on-entire-website/
    https://yellowpencil.waspthemes.com/docs/managing-the-element-styles/

     

     

    iancdma
    Participant

    All I did with YellowPencil is override the font-weight and colors. Nothing related to layout.

    As for the custom CSS, here’s all I have:

     

    .home .sh-section-overlay-front {
    z-index: 1;
    }

    .section-justify-height-full .sh-column {
    min-height: 100vh;
    }

    .section-justify-height:not(.section-justify-height-only) .sh-column {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    }

    iancdma
    Participant

    I realized that the last bit of the custom CSS code is the culprit. I’ll put it inside a media query.

    There is something else however, the notice on top of the page isn’t mobile responsive.

    • This reply was modified 5 years ago by iancdma.
    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    There is something else however, the notice on top of the page isn’t mobile responsive.

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width: 1024px) {
.sh-page-notice .sh-page-notice-button {
    margin: 0;
}
}

    iancdma
    Participant

    Issue resolved, please mark like so.

    Shufflehound Support
    Moderator

    Ok. I have marked the topic as resolved.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)