Hi Team,
I have an Problem with the Catalogue Element and responsive view (see Link).
I found an “solution” here but this don’t really work because the catalogue-price don’t have an linebreak. So I use that for longer text in catalogue-price:
@media only screen and (max-width: 1150px) {
.av-catalogue-image {
margin: 0 auto;
display: block;
}
.av-catalogue-price {
position: relative;
}
.av-catalogue-title-container {
text-align: center;
}
.av-catalogue-title {
padding-right: 0;
}
.av-catalogue-content {
text-align: center;
padding: 0;
}
}
But what I have to do when the text is longer? ;) Hope you can help!
Thank you and reagrds
Mike
Hey Mike!
Can you please post a screenshot showing the issue as well?
I tried resizing browser window on your page but could not see any responsive issues on Catalogue element.
You can upload your screenshots on imgur.com or Dropbox public folder and post the links here
Cheers!
Yigit
Hey Yigit,
sure because before you can see the mess, the media query make all fine.
But that is what I wrote: I build the media query from 1150px (the longest text in “price” yet),
when it is e.g. 900px the text of “price” will overlay the text of “title” – so long the position
of *catalogue-price” is absolute. I don’t understand why there is no linebrake in “price”?!
Regards
Mike
… better will be title and price with width 50% and automatic linebreak for the text.
Hi Mike61,
Well, that’s because that space is intended for price, which is a few digits and not for a line of text with a few words. Fixing that via css is tedious. I suggest you put that text into the div below, with class av-catalogue-content and style it to look like av-catalogue-price. Here is what it’s going to look like and no overlays.
Let us know if you have any more questions.
Best regards,
Victoria
Hi Victoria,
thank you, you are right! You can close this ticket.
Bets regards
Mike