Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 5, 2023 at 7:23 pm #1424732
    mistermagoo8691

    Hi! I’ve just used the “Catalogue” component to show some of my trails, and I am quite satisfied with the result on desktop:
    desktop view

    See how terrible it is on mobile, though:
    mobile view

    This is the page: https://www.sentierigressoney.it/prova/

    Can you please make your CSS magic to move the thubmnail ABOVE Title/Content, while on mobile?
    Possibly I would like to have 2 options for the thumbnail: horizontally centered, OR set on the left.

    Thanks folks!
    Bye,
    A.-

    November 5, 2023 at 7:44 pm #1424733
    Mike

    Hey Angelo,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
#top .av-catalogue-list .av-catalogue-item-inner {
	width: 100%;
}
#top .av-catalogue-list .av-catalogue-title,
#top .av-catalogue-list .av-catalogue-content {
	padding: 0;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 7, 2023 at 5:46 pm #1424944
    mistermagoo8691

    It works like a charm, thanks Mike!
    So, basically you’ve extended the size of the “text part”, so that it takes the whole space, and leaves the thumbnail alone in a row, correct?

    Let me just ask for a last adjustment: what if I’d like to have the thumbnail CENTERED in the row?

    Thanks again!
    Bye,
    A.-

    November 7, 2023 at 6:07 pm #1424946
    Mike

    Hi,
    Correct, if to want to also center the thumbnail, try adding this css:

    @media only screen and (max-width: 767px) { 
	.av-catalogue-image {
	    float: none;
	    margin-right: 0;
	}
	a img.av-catalogue-image {
		margin: auto;
		display: block;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.