Showcase timeline bigger images

More
5 months 3 days ago - 5 months 2 days ago #468 by slimjim
Hi,

I would like to increase the size of the timeline images as 40px is a bit to small for my taste.
I've tried to do that with the following css overwrite:

.timeline-img {
position: absolute;
top: 0;
left: 0;
width: 80px !important;
height: 80px !important;
border-radius: 50%;
transition: box-shadow 0.3s, transform 0.3s;
}
.timeline-img img {
border-radius: 50px;
display: block;
height: 80px !important;
left: 0;
position: relative;
top: 0;
width: 80px !important;
}


In here the height and width are set to 80px instead of 40px.
Moreover, I've added !important.

This seems to work with one exception.
The margin-left is set to -30px instead of -40px.
If I overwrite that with css then I wreck the mobile display.

Would you please be so kind to let me know where i can adjust the margin-left?

Kind regards,
Jim
Last edit: 5 months 2 days ago by Gregorio.

Please Log in or Create an account to join the conversation.

More
5 months 3 days ago - 5 months 2 days ago #469 by slimjim
To add when the margin-left is set to -30px instead of -40px then the image is not centered on the time line and part of the image may disappear behind the text.

Example see below:
Attachments:
Last edit: 5 months 2 days ago by Gregorio.

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago - 5 months 2 days ago #470 by Gregorio
Hi slimjim,
Can you please try to add this code to the end of your CSS file?

#digi_showcase_146.timeline .timeline-img {
margin-left: -40px;
}
#digi_showcase_timeline::before {
left: 38px;
}


I think it solves the problem.
Please, let me know.

Kind regards,
Gregorio
Last edit: 5 months 2 days ago by Gregorio.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago - 4 months 4 weeks ago #472 by slimjim
Hi Gregorio,

Thanks for you fast reply and thanks a lot for being willing to help!
It seems to work for desktop view.
However, it seems to negatively affect the mobile view (see below).
Any suggestions on how to fix that as well?

Attachments:
Last edit: 4 months 4 weeks ago by Gregorio.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago - 4 months 4 weeks ago #473 by Gregorio
Let's try by adding this CSS:

@media screen and (max-width: 768px) {
#digi_showcase_146.timeline .timeline-img {
    margin-left: 0px;
}
}

You can change the value of 768px into the media query according to the value you set as "mobile view switch" into the timeline settings.

If you are happy about the module and the support and you want to share, you could write a review on JED for Digi Showcase. It would be helpful to show other users how the module works and it would be helpful to spread it more and more. In case you are willing: extensions.joomla.org/extension/digi-showcase/

Thank you, let me know how the new code works.
Kind regards,
Gregorio
Last edit: 4 months 4 weeks ago by Gregorio.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #475 by slimjim
Hi,

Thanks for your continued support.
I tried that but when i add "@media screen and (max-width: 768px)" to the custom css of my template then that particular line is ignored.

Any other suggestions?

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum