How to arrange rows like this w/ mouse over effect

Support
#1

Hi so I’m trying to re-create several effects from the opening section of Crowdrise.com -

  1. How can I arrange 4 separate ‘cards’ like this in 1 row but when it displays on a mobile it stacks columns of 2? (my website is easystartup.net but when you view the 4 cards at the top in mobile device it shows them each as 1 row - I realise I may not use cards for this effect but could use content areas or something else - I’m open to suggestions)

  1. How can I achieve the mouse over effect of that box popping up and down like a ‘wave effect’ when you hover? I have circled the static state appearance in red and the hover state in green in the screen shot, this section is used in the very beginning of Crowdrise’s website right under the header.

If you guys could help me to achieve some similar feature like this I would greatly appreciate it, I’ve particularly had this problem with never being able to arrange icons to display in the same row on mobile devices it always breaks them up into their own columns where as on desktop it may show them aligned

I will be using this code/feature in other areas of my website (to be able to stack them on mobile in rows of 2 or 3 or 4 etc) so this particular question is going to help me out a lot with other parts of my site as well. Thank you very much in advance.

Summary: I want top re-create a row of 4 items with images as the background with the same mouse over effect and mobile responsive stacking as seen on the Crowdrise example I have given - For the sake of learning the code and producing the effect I want a direct reverse engineering of this to use on my build could work.

Second Question:
I’m also trying to use this http://bestjquery.com/tutorial/testimonial/demo13/ testimonials slider in my page however it also is just displaying each ‘testimonial card’ in a separate column as oppose to 3-4 in a row… How could I modify this to achieve the correct effect?

#2

Hi,

  1. To achieve this, add a class to your row.

For example add my-row

Then add this in Theme Options > CSS


element.style {
}
.e181-3.x-column, .e181-10.x-column {
    background-color: transparent;
    z-index: 1;
}
@media (max-width: 767px) {
.my-row .x-column.x-sm {
    float: left;
    width: 48%;
    margin-right: 4%;
}
}
  1. Sorry this isn’t a feature by X. It could be possible with custom development but this is outside the scope of support that we can offer

Second Question:
I’m also trying to use this http://bestjquery.com/tutorial/testimonial/demo13/ testimonials slider in my page however it also is just displaying each ‘testimonial card’ in a separate column as oppose to 3-4 in a row… How could I modify this to achieve the correct effect?

It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

#3

I definitely understand regarding 3rd party scripts. Thank you very much for the help setting the tables up. I really appreciate it. When I added the above code and class name ‘my-row’ to the section/row that contains my cards to apply this effect it didn’t do anything, I still seem them arranged 1 ontop of the other on mobile device and on desktop looks the same also…

#4

Hi WIll,

Please update this block of code:

@media (max-width: 767px) {
    .my-row .x-column.x-sm {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
}

to

@media (max-width: 767px) {
    .my-row .x-column.x-sm {
        float: left;
        width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;
    }

    .my-row .x-column.x-sm:nth-child(2), 
    .my-row .x-column.x-sm:last-child {
        margin-right: 0;
    }
}

In case it still does not work, please provide us with the URL of the page you are working on so that we can check it.

Thank you.

#5

Thanks this worked for the mobile stacking, I have one more question, is it possible to add padding of 5EM to the left and right - BUT ONLY on desktop view? on mobile devices I want the padding to just be 1EM on the left and right side.

my website is easystartup.net

#6

Hey William,

Yes you can add padding to the code. You may use something like this:

.my-row .x-column.x-sm {
  padding-left: 5em;
  padding-right: 5em;
}

@media (max-width: 767px) {
    .my-row .x-column.x-sm {
        float: left;
        width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;
        padding-left: 1em;
        padding-right: 5em;
    }

    .my-row .x-column.x-sm:nth-child(2), 
    .my-row .x-column.x-sm:last-child {
        margin-right: 0;
    }
}

Hope this helps. Please let us know how it goes.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.