How to stretch M4's featured image on mobile devices?

Posted in: Newspaper
Post count: 9
fettbauch
#82693
Dec 7, 2015 at 11:12 am

Hello

I use module M4 to display articles on category page, but images are smaller on mobile devices, how to stretch each image to full width?

Here’s the example:

Thank you

  • This topic was modified 10 years by fettbauch.
Post count: 23312
Catalin
#82814
Dec 7, 2015 at 4:50 pm

Hello fettbauch,

Please make you sure that you refer to the Module 4 on category page. I’ve tested on my side with M4 on category page and on mobile version and all the images are full width. You can look here the result: http://screencast.com/t/YOckkOZnDJ – http://screencast.com/t/XOg979wWD .
Please try to disable all the active plugins, except Visual Composer and install only the plugins that come bundle with our theme, clear all your caches and test it again. If you problem is still there, please provide your URL website so I can inspect it closer.

Hope this helps and let us know how it goes!

Thank you for the message!

Post count: 9
fettbauch
#82910
Dec 8, 2015 at 4:21 am

Hi Catalin,

I’m sorry for the mistake, it’s M11 not M4.

Thanks a lot!

  • This reply was modified 10 years by fettbauch.
Post count: 22421
Bogdan B.
#83012
Dec 8, 2015 at 2:24 pm

Hello,
Unfortunately the theme has no option for it and it will be no easy task to make it work. You will need to change the thumbnail used by the element and modify it’s css. There is no easy method to do it except coding it. You will need coding knowledge to get it done. you can hire a freelancer if you cannot do it from sites like studio.envato.com
Thank you!

Post count: 9
fettbauch
#83110
Dec 9, 2015 at 3:42 am

Hi Bogdan,

thanks for the reply, I have a little bit coding knowledge and want to learn to fix it, could you please give me some simple steps how to start?

Thank you so much!
Fettbauch

Post count: 22421
Bogdan B.
#83179
Dec 9, 2015 at 1:00 pm

Hello,
The modification is all css related
you will need to use the media queries to target just the mobile viewport. Then you can make images use the whole container width and change positioning:

@media (max-width: 767px){
.td_module_11 .td-module-thumb {
width: 100%;
position:relative;
}
.td_module_11 .td-module-thumb .entry-thumb{
width:100%;
}
}

Now you will need to position the titles and excerpts.
This should get you started on your task.
Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newspaper’ is closed to new topics and replies.