Alignment issues... is this a bug?

Home Forums Jevelin Theme Alignment issues… is this a bug?

Home Forums Jevelin Theme Alignment issues… is this a bug?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    RESOLVED Posts
  • windsocks
    Participant

    Hi,

     

    I’m trying to achieve 3 column home page on my web site, using Jevelin. The final look should resemble something like the home page on http://thejourney.asia.

     

    I started by modifying the Corporate sample pages provided with the theme. I was able to achieve something similar – refer to attached screen cap “Snap 2017-02-04 at 13.37.22.png”. For the purpose of this support query, I have displayed the borders of each column with different colors; each column is 1/3 in width and contains an image and a textbox. As you can see, there is no spacing between the columns.

     

    I then modified the columns to insert margin to “0px 10px 0px 10px” – all 3 columns were modified similarly. When I refresh the page, the last column has been pushed to below the first column – refer to attached screen cap “Snap 2017-02-04 at 13.41.26.png”

     

    Can you assist?

     

    Thanks,

    Peter.

     

    Update: I’ve noticed that the alignment on mobile is not symetrical. The left margin is a lot more bigger than the right (Snap 2017-02-04 at 14.37.49.png). I’ve further attached the padding and margin settings for section and column.

     

    Btw, where can I set margins for section?

     

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

    Hi @windsocks,

     

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

     

    It seems you are facing the same issue as discussed in the following topics.

     

    https://support.shufflehound.com/forums/topic/unable-to-create-proportionate-cards/#post-1365

    https://support.shufflehound.com/forums/topic/column-margin-problem/#post-956

     

    So to resolve the issue could you please share me your site URL where it’s displaying so that i can help you?

     

    Best regards,
    Shufflehound team

    windsocks
    Participant

    Hi there,

     

    Thank you for replying. The site is a “Works in Progress” at http://pu.albatross.sg

     

    Cheeries,

    Peter.

     

     

    You can try resolving the issue on your shared site home page 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 (min-width: 768px){
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-4 {
        width: 27.333333%;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-4:last-child {
        margin-right: 0;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-4:first-child {
        margin-left: 0;
    }
    }

    windsocks
    Participant

    Thanks guys, but no joy. The third column still goes to the next line…  🙁

     

     

    Solution for this topic

    It seems this is not working on your site because the greater than sign added in CSS code is converted to HTMl entity on your site as shown in the attached screenshot.

     

    Please try using the shared CSS code removing the greater than sign as following.

     

    @media (min-width: 768px){
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4 {
        width: 27.333333%;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4:last-child {
        margin-right: 0;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4:first-child {
        margin-left: 0;
    }
    }
    Attachments:
    You must be logged in to view attached files.

    windsocks
    Participant

    Ooooh… that works!! Thanks guys!! 😀

    Shufflehound
    Moderator

    Nice to hear that. 🙂

    windsocks
    Participant

    Hi hi,

     

    My apologies to bother you again on this topic.

     

    Now that I’ve managed to get the columns sorted out, how do I make the boxes in each column the same height? My intent is for each box to have a height of 10 lines of text, and whatever text that goes beyond the 10 lines is truncated and replaced with “…”

     

    Thank you in advanced,

    Peter.

     

     

    Try achieving this using below CSS code.

     

    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .sh-text-block {
        height: 230px;
        overflow: hidden;
    }

    windsocks
    Participant

    Thanks… that works. Now my columns are all same height. But what about the “…” if my text was truncated? I tried modifying your code to

    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .sh-text-block {
        height: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    but that didnt work as the CSS text-overflow will only work if the text was in a single line….

     

    but that didnt work as the CSS text-overflow will only work if the text was in a single line….

    Yes you are right that is a limitation of CSS and you have to develop custom code in the Jevelin child theme to achieve it.

    windsocks
    Participant

    Hi hi,

     

    This topic is turning out to be much longer than I had anticipated. My apologies.

     

    One of our users discovered that the home page look like the screncap “Snap 2017-03-13 at 13.29.13.jpg” on IE 11. Seems like the images are not resized as it should be. Is the theme compatible on IE? What is the workaround for this?

     

    The user also discovered that on Chrome/FF, the columns are not centered. Refer to screencap “Snap 2017-03-13 at 13.37.35.jpg”. How do I center the columns?

     

    We’ve since added another page (http://pu.albatross.sg/about/). On this page, instead of having 3 x 1/3 columns, we’ve used a 2/3 column and a 1/3 column. I am now experiencing the original issue. I’ve attempted to resolve it by modifying your CSS code to become below

    @media (min-width: 768px){
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4 {
    width: 27.333333%;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4:last-child {
    margin-right: 0;
    }
    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4:first-child {
    margin-left: 0;
    }
    body.home .sh-section-292d5e35a566f7614dd1ac49c0a613ab .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4 {
    width: 27.333333%;
    }
    body.home .sh-section-292d5e35a566f7614dd1ac49c0a613ab .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4:last-child {
    margin-right: 0;
    }
    body.home .sh-section-292d5e35a566f7614dd1ac49c0a613ab .fw-row .sh-column.fw-col-xs-12.fw-col-sm-8 {
    width: 54.666666%;
    }
    body.home .sh-section-292d5e35a566f7614dd1ac49c0a613ab .fw-row .sh-column.fw-col-xs-12.fw-col-sm-8:first-child {
    margin-left: 0;
    }
    }

     

    Above code doesn’t seem to work. How should I do this?

     

    Thanks,

    Peter

     

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

    Sorry to hear of the problem you are having but please note that this is an issue of Unyson plugin that you have used to create those columns.

     

    The Unyson plugin developer will fix it but not sure when so we are just trying to help you to resolve it by developing custom CSS code which may not proper solution.

     

    We can try to fix the major issues like IE issues but other minor issues like spacing issues you have to ignore or fix it yourself or hire developer to fix it or do not use margins in between the columns or just do not use unyson page builder to create columns.

     

    Try using below CSS code to resolve IE issue.

    body.home .sh-section-6b60dc9e2043efe53db6b9bfc8f9a97c .fw-row .sh-column.fw-col-xs-12.fw-col-sm-4 {
    overflow: hidden;
    }
Viewing 14 posts - 1 through 14 (of 14 total)