[ramitkParticipant]

Hi,
I want to use four cards below the main slider on my website and I have some problems:

1/- I want to maintain the square form 1:1 on all secreen sizes ( Because now it is rectangular on mobile devices)

2/- On PC it shows no gaps between gaps but on mobile it does I want to remove them

3/- I want to use different pictures as backgrounds on all 4 cards.

Thank you very much

[Rue NelModerator]

Hello There,

Thanks for writing in! Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[ramitkParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

#1 Please add top and bottom padding to elements to adjust the height.

#2 Find and remove this CSS :

@media (max-width: 640px){
.x-column {
    margin-top: 30px;
}
}

Add this :

.x-card-outer.flip-from-top.center-vertically.flip-3d {
    margin-bottom: 0;
}

#3 Add a custom class like my-class to card element, then insert following CSS in customizer :

.x-card-outer.my-class .x-face-inner {
    height: 100%;
    background-image: url(http://placehold.it/300x300/3498db/2980b9);
    background-position: top center;
    background-repeat: no-repeat;
}

Hope it helps.

[ramitkParticipant]

Hi,
Thank you for the quick answer

1- When adjusting padding it affects PC and rectangular form still be shown on some screens like portrait mode on ipad
2- Sorry, I’m a begginer would you please tell me where to find ths CSS code that I can edit

[ChristopherModerator]

Hi,

#1 The CSS is under cornerstone settings tab/custom CSS, see the attachment.
#2 Please note that the elements are responsive and their adjust height depends on screen size. We do not recommend setting fix height.

Hope it helps.

[ramitkParticipant]

Thank you again
1/- When edited it affected the icon boxes under them, any solution to not affect these icon boxes
2/- Yes I know fixed hights are not good but can I maintain a square 1:1 form with different dimensions on different screen sizes?

Thank you

[ramitkParticipant]

1- done!

[ChristopherModerator]

You’re welcome.

#1 Please add the class coco to all columns in section #2.

#2 If padding didn’t work as you expected, the only way left is fixing the height.
Please add this code :

.x-card-inner {
    height: 272px !important;
}

You may need to use media query rule to adjust height for different screen sizes.

Thanks.

[ramitkParticipant]

Hi,

1/- It worked!!
2/- Unfortunally it didn’t work and it showed significant dimension variations across devices which make it very difficult to find a picture that fits all screen devices

[RadModerator]

Hi there,

Please try this one,

.x-card-inner {
    min-height: 272px !important;
}

Thanks!

[ramitkParticipant]

using this code
.x-card-inner {
height: 272px !important;
}

I managed to figure out the right dimensions that I need to use, I used this picture (the blue area is the center on all devices, so we need to make our object in this area and it should work)

Now my second question is:
How can the main slider be cropped and not redimensions on mobile devices. I mean fixed height but the width changes with different screen sizes.
Thank you very much

[ChristopherModerator]

Hi there,

Please add .masthead in slider’s containers field.
I don’t find where you’ve taken the screen shot, please clarify what you’re trying to achieve.

Hope it helps.

[ramitkParticipant]

Hi christopher,
No it is not a screen shot it is the picture model I use to achive responsive card images on all devices.
Now if I create a picture respecting the same dimensions the Card will be responsive on all devices

[ramitkParticipant]

Hi,
Sorry but where can I put the .masthead ???
I need to mention that I use Layerslide not RevSlide
If it is not possible on layerslieder would you please show me how to do it on RevSlider?
Thank you

[Author]

Posts