Responsive
Permalink Browser Info Environment
My company and I have purchased this module.
Firstly, we love the animations and functionality.
Sadly, we have discovered that the text only shows on the back of the image (would think it would be a great addition to have different text on both sides) and found that the text is not responsive, so people on mobile and lower-resolution devices do not see the entirety of the text, as it is pushed down, off of the square.
Is there any way that this can be changed in the future?
Attached is an example.
Firstly, we love the animations and functionality.
Sadly, we have discovered that the text only shows on the back of the image (would think it would be a great addition to have different text on both sides) and found that the text is not responsive, so people on mobile and lower-resolution devices do not see the entirety of the text, as it is pushed down, off of the square.
Is there any way that this can be changed in the future?
Attached is an example.
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Hey Willem,
Thanks for the speedy reply!
I have tried your style solution, but (although it shrinks the text where described), the text seems to still go off of the block. Could this be due to the positioning of the text?
Thanks for the speedy reply!
I have tried your style solution, but (although it shrinks the text where described), the text seems to still go off of the block. Could this be due to the positioning of the text?
Hey Willem,
Thanks for the speedy reply!
I have tried your style solution, but (although it shrinks the text where described), the text seems to still go off of the block. Could this be due to the positioning of the text?
Thanks for the speedy reply!
I have tried your style solution, but (although it shrinks the text where described), the text seems to still go off of the block. Could this be due to the positioning of the text?
You could change the padding and margin for .image_plus_view h2 and .image_plus_view p. For example:
If you use chrome or firefox as a browser, with their webdeveloper plugins/options, you could inspect the block and see what css changes need to be made.
I did start work on a new version that includes text fields for the front side as well. Not sure when I will be ready and tested yet, probably within 2 weeks.
Good luck !
<style> .image_plus_view h2 { margin-bottom: 0; } .image_plus_view p { padding-top: 5px; } </style>
If you use chrome or firefox as a browser, with their webdeveloper plugins/options, you could inspect the block and see what css changes need to be made.
I did start work on a new version that includes text fields for the front side as well. Not sure when I will be ready and tested yet, probably within 2 weeks.
Good luck !
Hey Willem,
Been working on CSS for a few hours and still have no luck with making the h2 and p tag go to the top of the square.
Basically, I am trying to get the text to show in mobile view because they are too big in a phone view. I think shrinking the text still won't work though because the size of the text might be too small when shrunk.
Any ideas/work arounds?
Been working on CSS for a few hours and still have no luck with making the h2 and p tag go to the top of the square.
Basically, I am trying to get the text to show in mobile view because they are too big in a phone view. I think shrinking the text still won't work though because the size of the text might be too small when shrunk.
Any ideas/work arounds?
Ok, how about a different approach, is it possible to use fewer words for smaller devices ? I mean different content within the block.
On what concrete5 version are you working? v8 ?
You can set the 'Device Visibility' for a block, and with this create different blocks (with different content) for different devices.
To do this, these options can be found in page edit mode, click on a block and choose 'Design & Custom Template'. Now choose 'Shadow and Rotation' (no, not a logical place) and there you can find 'Device Visibility'.
Now with this options, create one block for larger devices and also one for small devices.
Hope this can help you ?
regards, Willem
On what concrete5 version are you working? v8 ?
You can set the 'Device Visibility' for a block, and with this create different blocks (with different content) for different devices.
To do this, these options can be found in page edit mode, click on a block and choose 'Design & Custom Template'. Now choose 'Shadow and Rotation' (no, not a logical place) and there you can find 'Device Visibility'.
Now with this options, create one block for larger devices and also one for small devices.
Hope this can help you ?
regards, Willem
Hey Willem,
We are using 8.1 .
Unfortunately, these blocks are necessary for what we want to accomplish. They are going to be a showcase of what we offer (right now we are using a different content grid but the "card flip" animation is something we love.) So we cannot hide the blocks.
Thanks for all the help so far :)
We are using 8.1 .
Unfortunately, these blocks are necessary for what we want to accomplish. They are going to be a showcase of what we offer (right now we are using a different content grid but the "card flip" animation is something we love.) So we cannot hide the blocks.
Thanks for all the help so far :)
If you need more help with the css, I can have another look tomorrow around this time.
It could be that the css needs to be more specific:
Try to use something like this:
That should bring the H2 to the top. Perhaps also decrease the font sizes a bit.
Try to use something like this:
<style> div.ccm-page .image_plus_view h2 { margin: 0; padding-top: 2px; padding-bottom: 2px; } div.ccm-page .image_plus_view p { margin-top: 0; padding-top: 2px; } </style>
That should bring the H2 to the top. Perhaps also decrease the font sizes a bit.
A new version is available with extra fields for Title and Description on the front side.
The existing Title and Descriptions will still be shown on hover.
The existing Title and Descriptions will still be shown on hover.
Thank you for your suggestions. I can add options for front- and back side text. Good idea !
For longer text being cropped on small screens or smaller blocks, I'm not sure how to solve this. I could try to add scrollbars, but I doubt that this would work nicely on all devices (touch) and browsers.
If you have more text than fits in the block, maybe adjust the size of the block itself for smaller screens ?
Also, did you take a look at the following page ?http://anchor-ict.com/portfolio/concrete5_add-ons/image_plus/adapt_...
It describes how to make small adjustments.
You could target the text eg:
I will have a look at the front/back side text options.
Regards, Willem