JoseG
-
Posts
6 -
Joined
-
Last visited
Reputation Activity
-
JoseG got a reaction from AlisonJ in Image Card and Stack blocks on 7.1: No option to add a background colour for the text area
Hi all,
I came upon a solution by trial and error.
The following allows you to apply a background to all Image Card blocks, including the stacked configuration. You'll have to look up the hex code for the color you want to use of course.
I then found that the text inside said cards was too close to the edges - something that isn't as noticeable when there is no background; it's especially apparent on mobile. I therefore added a bit of padding, which you can see in the code below (excuse my syntax).
Hope others are helped by this!
.design-layout-card { background: #FFFFFF; } .design-layout-card .image-card>div { padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom:5%; } }
-
JoseG got a reaction from FreyaRoseTanner in Image Card and Stack blocks on 7.1: No option to add a background colour for the text area
Hi all,
I came upon a solution by trial and error.
The following allows you to apply a background to all Image Card blocks, including the stacked configuration. You'll have to look up the hex code for the color you want to use of course.
I then found that the text inside said cards was too close to the edges - something that isn't as noticeable when there is no background; it's especially apparent on mobile. I therefore added a bit of padding, which you can see in the code below (excuse my syntax).
Hope others are helped by this!
.design-layout-card { background: #FFFFFF; } .design-layout-card .image-card>div { padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom:5%; } }
-
JoseG reacted to simkrys in Image Card and Stack blocks on 7.1: No option to add a background colour for the text area
I think I found the answer in a blog. For this code you will need to set the image stack settings to:
// Stack image .sqs-block-image .design-layout-stack .image-card-wrapper { background: #fff !important; } .sqs-dynamic-text-container { padding-left: 8% !important; padding-right: 8% !important; padding-top: 6% !important; padding-bottom: 8% !important; } Source
Worked for me!
-
JoseG got a reaction from tuanphan in Image Card and Stack blocks on 7.1: No option to add a background colour for the text area
Hi all,
I came upon a solution by trial and error.
The following allows you to apply a background to all Image Card blocks, including the stacked configuration. You'll have to look up the hex code for the color you want to use of course.
I then found that the text inside said cards was too close to the edges - something that isn't as noticeable when there is no background; it's especially apparent on mobile. I therefore added a bit of padding, which you can see in the code below (excuse my syntax).
Hope others are helped by this!
.design-layout-card { background: #FFFFFF; } .design-layout-card .image-card>div { padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom:5%; } }
-
JoseG reacted to Isha in Left Align Portfolio Titles
Hi! I am trying to left align the portfolio titles with the theme Hawley. I currently have it set so that the image follows the cursor, but there is no option to have the links stacked and not centered. I would like it to be left aligned while preserving the follow cursor hover feature, is there any way to do that in the CSS? I tried:
.portfolio-hover-item-content { font-family: 'Clifton'; font-size: 55px; text-align: left; } RESOLVED: USE
.portfolio-hover-items { text-align: left !important; align-items: flex-start !important; } .portfolio-hover-items-list { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
