Hello,
I’ve run into an issue that seems like it would have an easy fix.
There are 3 Rolumns here – http://planetlucid.com/deity/ – That I’d like stacked to appear as Rows
I’ve inserted the following CSS with no luck.
@media screen and (max-width: 480px) {
.panel-grid-cell {
height: 33%;
}
}Any help is appreciated.
Thanks!
Hi Planetlucid,
I’ve had a quick look at your website and it looks like you’ve managed to accomplish this. Do you still need help with this?
Hi Alex
Thanks for your reply.
I’m still looking for how to get the rows to be 33% height each.
I’ve included it in the CSS from the previous post but it didnt work.
Hi Planetlucid,
Setting the height via the column will result in columns being cut off so we ideally want to do this via the hero widget itself. Please open the hero widget and scroll down to the Design and Layout settings group. Set the Top and bottom padding to 16.5% and set the Extra top padding to 0. How does that look?
Hi Alex,
I’ve tried your suggestion, but the site still looks the same on mobile.
I’ve updated the padding and included a screenshot of the section here –
https://cl.ly/mELi
However, I don’t see the extra top padding section but I may have made an error somewhere.
Anny suggestions?
Thanks again.
Hi Planetlucid,
The Extra Top Padding setting is a part of the Hero widget settings. Please open the Hero widget and then open the Design and Layout settings group – which will be in the widget area.
Hi Alex,
Apologies in advance for the length of this, but I sort of got it to work using another method. Though, there are still some issue I may reach out for help in the future.
Your screenshot helped – I was previously looking on the right column area since that said ‘mobile padding’. The issue I’m having now is that I only want this effect to happen on mobile as stacked on top of each other.
On desktop I want it to look like this:
Correct height and button placement
not this
Incorrect height on desktop
What you suggested solves the problem for mobile but it’s not within a media query so it affected desktop too.
I did a little research and found a css property called ‘vh’ that I’ve never used before, but I couldn’t get it to work at first.
So…. I kept trying and set the height of the columns to 100 vh.
Then added the following CSS to the overall site:
@media screen and (max-width: 600px) { .sow-slider-base ul.sow-slider-images{ list-style: none; margin: 0; overflow: hidden; height: 33vh; } h1 {font-size:30px} }result –
Now I just need to figure out why the text and buttons are towards to the top rather than vertically centered. Any help is greatly appreciated.
Desktop size unaffected – Custom CSS
Thanks again
–
Ry