Joomla Templates Club 406,261 posts

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#761669

Hello,

I want to make modules inside the red rectangle (Facebook, Twitter and Video) responsive modules. For example, in an extra small screen they will fit 12 columns.

How can I do that?

Thanks,
Joana

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#761737

Hi
You can publish the your module in the module position they are responsive . You can manage the size of the module position via template manager > Layout > responsive layout Tab .
You can change the size of module position for different screen size devices .

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#764040

Hi Joana,

All the problems as your mention above are from iframe tag into the module. In this case, you can force it on mobile layout

Open templates/ja_medicare/css/custom.css file and add new rule

@media (max-width: 767px) {
.t3-module.row-feature iframe {
width: 100% !important;
height: 100% !important;
}

.t3-module .module-ct iframe {
width: 100% !important;
height: 100% !important;
}
}


Regards

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#782485

The code did not work.

Ninja Lead wrote:

Hi Joana,

All the problems as your mention above are from iframe tag into the module. In this case, you can force it on mobile layout

Open templates/ja_medicare/css/custom.css file and add new rule

@media (max-width: 767px) { .t3-module.row-feature iframe { width: 100% !important; height: 100% !important; }
.t3-module .module-ct iframe { width: 100% !important; height: 100% !important; } }

Regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#801707

@rovisco: You can provide me the URL of your site and admin login info of your site again by putting info in your reply and SET AS PRIVATE reply (so that only Moderators and Staffs can see). I will check this bug directly on your site.

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#803771

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#811761

Look at the screenshot here and it’s working as your expectation, right?

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#812405

Yes it is, thanks! Can you tell me how you fix it?

Ninja Lead wrote:

Look at the screenshot here and it’s working as your expectation, right?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#812431

I applied the same my solution here to fix the problem on your site

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#812435

Well, it worked… Maybe I miss something when I tried to fix.
Thanks, it is solved.

Ninja Lead wrote:

I applied the same my solution here to fix the problem on your site

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#832693

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#832792

I am sure this is not a bug from our product, I checked on your site some cases need to change via templates/ja_medicare/css/custom.css file

find and remove

.col-lg-6 {
  height:250px;
}

• and find and change

@media (max-width: 767px) { .t3-module.row-feature iframe { width: 100% !important; height: 100% !important; } .t3-module .module-ct iframe { width: 100% !important; height: 100% !important; } }

to

@media (max-width: 767px) { .t3-module.row-feature iframe { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } .t3-module .module-ct iframe { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } }

[rovisco Friend roviscoJoin date: June 2015Posts: 72Downloads:0Uploads:0 Thanks: 15]

#834384

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#834518

Like I said before that, about the iframe problem on your site is not from our product, it depends on the module itself, if module supports responsive layout, it would work fine with our template.

[Author]

Posts