Hi all,
I have a question about the Main feature particle.
In www.dafeine.nl I used it in the 'Coffee Connects' section:
the text "Koffie verbindt mensen" on the left - and the photo of Ralf on the right.
On a mobile phone, only the text block is visible, and the photo disappeared.
My question is, is this a property of this particle..., or am I doing something wrong?
I was hoping that on a phone, the photo would appear under the text.
Have a very nice evening!
Stefan
I have a question about the Main feature particle.
In www.dafeine.nl I used it in the 'Coffee Connects' section:
the text "Koffie verbindt mensen" on the left - and the photo of Ralf on the right.
On a mobile phone, only the text block is visible, and the photo disappeared.
My question is, is this a property of this particle..., or am I doing something wrong?
I was hoping that on a phone, the photo would appear under the text.
Have a very nice evening!
Stefan
Accepted Answer
Hi Stefan,
by default the image section of the Main Feature particle is hidden on phones and tablets, but you can easily make it visible.
Here's what you need to do:
1. Add the following code to your custom.scss file:
IMPORTANT: Make sure that you have the
2. "Recompile CSS" in the Base outline.
This way the image will be visible on all devices.
by default the image section of the Main Feature particle is hidden on phones and tablets, but you can easily make it visible.
Here's what you need to do:
1. Add the following code to your custom.scss file:
.g-main-feature {
.image-block {
@include breakpoint(tablet-range) {
display: block;
}
@include breakpoint(mobile-only) {
display: block;
}
}
}IMPORTANT: Make sure that you have the
@import "dependencies"; code at the very top of your custom.scss file.2. "Recompile CSS" in the Base outline.
This way the image will be visible on all devices.
Responses (12)
-
Accepted Answer
-
Accepted Answer
Hi,
good tip but the Link button is on the image.
I'm using Royalty, So I have set the rule.
.g-main-feature .image-bottom {
padding-top: 15px;
}
I hope this information will be helpful
Thank YouAttachments:
-
-
Accepted Answer
-
Accepted Answer
-
Accepted Answer
Hi Mario,
No, the code is not different.
Just make sure that you have the@import "dependencies";code at the very top of your custom.scss file.
For more details, please have a look at the Adding a Custom Style Sheet section in the official Gantry 5 documentation. -
Accepted Answer
Ciao Ivo,
I've a issue that I can't solve.
Content is over the image.
How can you help me?
Thank You
Web siteAttachments:
-
-
Accepted Answer
Hi Claudio,
You should either set the Image at the bottom option to "No" or add the following code to your custom.scss file:
body {
.g-main-feature {
.image-bottom {
@include breakpoint(mobile-only) {
margin: 0;
}
}
}
} -
Accepted Answer
Ciao Ivo
I've set the Image at the bottom option to "No" and added this code
.g-main-feature {
.image-block {
@include breakpoint(tablet-range) {
display: block;
}
@include breakpoint(mobile-only) {
display: block;
}
}
}
body {
.g-main-feature {
.image-bottom {
@include breakpoint(mobile-only) {
margin: 0;
}
}
}
}
but doesn't work this
.g-main-feature .image-bottom {
padding-top: 15px;
}
Attachments:
-
-
Accepted Answer
Hello Claudio,
Theimage-bottomclass is added to the markup (HTML) only when the Image at the bottom option is set to "Yes".
In my previous comment I didn't say to do both of the things. I set to do either one or the other. Either set the Image at the bottom option to "No" or add the code to your custom.scss file.
Anyway, If you want thepadding-topcode to always be in effect then add the following code to your custom.scss file:
.g-main-feature-image {
padding-top: 15px;
} -
Accepted Answer
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.