Recent
Categories
View Replies (7)

News module - desktop vs. mobile devices

  1. Issue
0
Votes
Undo
  1. marcusadamski
    marcusadamski
  2. Sherlock Holmes
  3. Free Templates / Extensions
  4. Sunday, 22 December 2019
  5.  Subscribe via email
Hello Ciaran,

I've started to use the News Module, but stumbled on an early issue. I only intend to display the latest news article on the home page, but I cannot find a suitable configuration which will work for both desktop and mobiles. If set to one column and the item layout to "Row - Text|Image" - this displays fine for desktop fine, but for smaller mobile screens (portrait) displaying text and an image side by side is far too cramped. However, if I use the item layout to "Column - Image|Text", the smaller article image is used and therefore pixelated across the width of the screen ... but this will work well for smaller mobile screens.

What would you suggest as a solution. Ideally, I like to keep the item layout to "Row - Text|Image", but make it responsive so the image / text stacks when on smaller screens. Is there any way to achieve this? I've attached a couple of images to illustrate the item layout = "Row - Text|Image".

Many thanks,
Marc
Attachments (2)
dektop.png dektop.png
mobile.png mobile.png
References
  1. https://www.lavenderandblackberry.com
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Marc

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 767px) {

.j51_news figure {

    flex-direction: column !important;

}}


Ciaran
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 1
marcusadamski
marcusadamski
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I've added the customer css, but unfortunately it didn't have any effect. After the CSS was added, I used FireFox's Web Developer -> Responsive Design Mode and set the width to 300px - please see the attached image. Unfortunately the article text is not readable.

Many thanks
Marc
Attachments (1)
News-at-300px-width.png News-at-300px-width.png
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Marc

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 3
marcusadamski
marcusadamski
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Please use the same log on credentials as for the other ticket you're looking at:
"
ImageHover Gallery - masonry style not working
"

I've previously sent them to info@joomla51.com. If you make any changes, please let me know what they are, as this is a live site.

Many thanks,
Marc
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Marc

Your template does not appear to have a custom CSS option. May I suggest allowing us access to your Extensions manager and we will create an override for the module to which we will add the suggested CSS directly.

Ciaran
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 5
marcusadamski
marcusadamski
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Actually, I see what the issue is, the CSS you originally gave was slightly incorrect for my website. I found the following worked :



@media only screen and (max-width: 767px) {

.j51news figure {

    flex-direction: column !important;

}}


Thanks for pointing me in the right direction.

Out of interest, because the text is unreadable on smaller screens, would this issue be considered as a bug and therefore be corrected in a later release of the extension?

Many thanks
Marc
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Marc

Thank you for the update.

This is certainly an option we intend to include, that where a user can select row/column for each screen size.

Ciaran
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!