- This topic has 19 replies, 2 voices, and was last updated 7 years, 3 months ago by
.
Hi there, I am trying to create 4 cards on my website with image+link. I created a section and four 1/4 columns to create cards. Since I needed a bit of gap between each one of them, I put left and right margin for all the four sections. Then what happened is, three cards stay on the same row and one card fell to a new row. I want all the four cards to be on the same row. So, I created a section and created four 1/5 columns and put sufficient left and right margins between them. Then I get something like this. https://snag.gy/T60vPN.jpg It is very uneven. What can I do to get 4 proportionate cards?
I’m attaching a file which is my desirable output. Also the entire card region is clickable.
Here is the desired output https://snag.gy/Dh1wKJ.jpg
Hi @Willy Justin,
I hope you are well today and thank you for your question.
It is Unyson plugin problem that we need to resolve developing custom CSS code as did in the following topic.
http://support.shufflehound.com/forums/topic/column-margin-problem/
Could you please create four 1/4 columns andshare me the page URL from your site where it is displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamI have created the page and sent you the link yesterday.
Any updates?
On which email id have you sent it?
Could you please send it on [email protected]
My bad. I had sent it to [email protected]. Now I forwarded to the abovementioned ID
Thank you i received the email.
I visited your shared page URL but it is only displaying “Maintenance Mode” message.
Could you please also share me temporary log in details on the above email id so that i can access the page?
Thank you for sharing the login details.
You can try achieving 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 (min-width: 768px){ .sh-section-f7a6b884ad4a93001fdb656885ef2356 .fw-row > .sh-column { width: 24%; } .sh-section-f7a6b884ad4a93001fdb656885ef2356 .fw-row > .sh-column:last-child { margin-right: 0; } }I entered CSS, but I’m not able to get margin on four 1/4 columns.
Check the page I tried this on <span id=”sample-permalink”>http://www.sirextiles.com/<span id=”editable-post-name”>designer-tiles</span>/</span>I can see it is working fine on the page http://www.sirextiles.com/designer-tiles/ that you shared in the email.
Please advise.
It is working only for 10px right margin. If I increase it,it’ll be in a different line.
Moreover, Now every column ( 1/1, 3/4, 2/3, 1/2, 1/3) are the same size as that of 1/4 column. So if I need only two 1/2 columns, they’ll appear as two 1/4 sized columns and will be pushed to the left side. I have updated http://www.sirextiles.com/designer-tiles/
I put up a single 1/1 column and it looks like a 1/4 column
As said above it is Unyson plugin problem and we are trying to resolve it using workaround custom CSS code so just don’t change the margin number of columns on that page and stick with one so that we can provide you the solution.
Alright. Now that 4 column pages are fine. But when I try to create another page with 3 columns ( http://www.sirextiles.com/<span id=”editable-post-name”>stone-series-pavers</span>/ ) the three columns occupy 1st, 2nd and 3rd slots of a 4-column layout. It looks very odd.
Replace the above provided CSS code with the following CSS code so that it will only work on that specific pages
@media (min-width: 768px){ body.page-id-8263 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-3 { width: 24%; } body.page-id-8263 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-3:last-child { margin-right: 0; } body.page-id-8126 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-4 {width: 32.333333%;} body.page-id-8126 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-4:last-child { margin-right: 0; } }Now it’s perfect for that particular page.
I made several other pages with 2 and 3 columns. Do I have to get custom CSS for each such page?
Yes just create all the pages first and apply margin then share me the pages URLs of all pages so that i can provide you the solution all at once.
I kinda tweaked the margins of other pages and it worked fine. But I need your help in this page. http://www.sirextiles.com/roof-tiles/roof-tile-products/ four 1/4 columns with 10px right margin. Similar to the one you already made.
Solution for this topic
To make it work on that page use the below CSS code.
@media (min-width: 768px){ body.page-id-8288 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-3 { width: 23.9%; } body.page-id-8288 .fw-row > .sh-column.fw-col-xs-12.fw-col-sm-3:last-child { margin-right: 0; } }Great. It worked. Thanks
You are most welcome here 🙂
