kekuleh
Forum Replies Created
-
Forum: Plugins
In reply to: [Popups for Divi] Please Help – Gravity Forms Does not Load in PopupThe same thing is happening to me.
The gravity form suddenly had inline style of “display: none” added when placed inside the popup.
I am using the latest version of Popup for Divi.
- This reply was modified 1 year, 3 months ago by kekuleh. Reason: typo
Hi George, Thank you for replying.
I see. Noted. Thank you.
- This reply was modified 2 years, 3 months ago by kekuleh. Reason: mark as resolved
Hi rubeushagrid13.
That really fixed the issue!
Thank you very much for the help.HI rubeushagrid13. Thank you for your reply.
https://snipboard.io/UQ2cvp.jpg
I clicked “Need Help” and it brought me here.
And the problem as I can see, it’s the article element, which has inline style for width. When the browser width exceeds ~2300px, the element width suddenly becomes 273px.
Problem solved!
For anybody who’s interested, here’s how I formatted it:
1) Default event list format header:
<div class="eventcards">
2) Default event list format:
<div class="eventcard"> <a href="#_EVENTURL"> <img src="#_EVENTIMAGEURL" style="width: 100%;"> </a> <div class="eventtimedate"> #_EVENTDATES <div>#_EVENTTIMES</div> </div> <div class="eventcontainer"> <div class="eventtitle"><b>#_EVENTLINK</b></div> {has_location}<p>#_LOCATIONTOWN, #_LOCATIONSTATE</p>{/has_location} <div>Available Space(s): #_AVAILABLESPACES </div> #_EVENTCATEGORIES </div> </div>
3) Default event list format footer:
</div>
4) CSS:
.eventcards { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .eventcard { /* Add shadows to create the "card" effect */ max-width: 400px; margin: 10px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; } /* On mouse-over, add a deeper shadow */ .eventcard:hover { box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5); } .eventtimedate { color: #fff; text-align: right; background-color: rgb(108, 190, 70); padding: 5px 10px 5px 10px; } .eventtitle { font-size: 20px; line-height: 25px; } /* Add some padding inside the card container */ .eventcontainer { padding: 2px 16px; }
I have made some changes.
The new format is as follows:<div class="eventcard"> <a href="#_EVENTURL"> <img src="#_EVENTIMAGEURL" style="width: 100%;"> </a> <div class="eventtimedate"> #_EVENTDATES | #_EVENTTIMES </div> <div class="eventcontainer"> <div class="eventtitle"> <b>#_EVENTLINK</b> </div> {has_location}<p>#_LOCATIONTOWN, #_LOCATIONSTATE</p>{/has_location} <div> Available Space(s): #_AVAILABLESPACES </div> #_EVENTCATEGORIES </div> </div>
with the accompanying CSS:
.eventcard { /* Add shadows to create the "card" effect */ display: flex; flex-direction: column; max-width: 400px; margin: 10px; list-style-type: none !important; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; } /* On mouse-over, add a deeper shadow */ .eventcard:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .eventtimedate { color: #fff; text-align: right; background-color: rgb(108, 190, 70); padding: 5px 10px 5px 10px; } .eventtitle { font-size: 20px; } /* Add some padding inside the card container */ .eventcontainer { padding: 2px 16px; }
How it looks now: https://joinkursus.com/locations/kursus-kahwin-wangsa-maju/
How can I make them stacked to the right?
Hi,
I am a newbie. I like the look of your events list (https://linkedfitness.com/linked-fitness-home/events/)can you share the code you made for that?