Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#184569

On iPhone and Android mobile phones, there are some strange margin issues going on between modules. This may be due to the fact that I’m using very few of the modules on the homepage, resulting in some additional margin space where I want none, but there are also two side news modules that are butted right up against each other with no margin at all.

I’ve done some customizing on the template, but nothing I can think of that would cause this… that’s not to say I didn’t break it though. 🙂 Still, I hope someone can at least point me in the right direction.

Also, on desktop, only the article titles show in the slider “tab,” but on mobile, I see the title AND part of the first sentence. How would I go about changing that to just show the article title? Perhaps it’s a CSS line-height adjustment I need to make somewhere on the mobile CSS?

I’ll provide a screenshot to show you what I mean:

I’m using this same template on three sites, so I need to fix this problem three times. If you could point out how to fix this one, I’ll take care of all three. But I need instructions, not just fixes. This is a time-sensitive project, so a swift reply is GREATLY appreciated.

Thank you!

---

Attachments:

1. 

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#481948

Upon closer inspection, it looks like the lack of gap between the third and fourth sidenews modules MAY be caused by the fourth module’s image being placed ABOVE the slider, not behind it. I don’t have a clue why, but I hope that adding more information to this thread might provide someone with an explanation.

@saguaros, you’ve already taken a look at my site for other SideNews related issues. I hate to ask for more help, but would you mind taking a look at this also, since you already have site access?

Thank you!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#482246

It seems be ok now, please let me know if that’s what you want to achieve.

Regards

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#482631

It appears you’ve fixed the spacing issue around the four Side News modules, but there’s still a lot of space around the advertising module I’ve got at position-9.

The first sentence of article text is still showing up in the Side News sliders (not just the title). Your thoughts on fixing that?

Also, please provide some excellent directions (like you did before) so that I can correct these issues on other sites utilizing the same template.

Thank you!

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#482822

Bump. Please follow-up.

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#482998

Please post the changes you made to resolve this, so I can replicate them. Fixing is great, but educating is better. I’m sure I’m not the only one who needs this solution.

Thank you, @saguaros.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#483168

Hi,

I applied this css change below

@media (max-width: 767px) {
}

in file: style-responsive.less in less folder:

.ja-sl-2 {
padding-top: 0 !important;
}
.ja-sl-2 .t3-module,
.ja-sl-2 .module {
margin-bottom: 10px !important;
}

Then compile less to css.

Regards

1 user says Thank You to Saguaros for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#483881

@saguaros, thanks! That’s exactly what I needed. Much appreciated!

The only thing still not perfect about these Side News modules is that on my mobile device, I am still seeing the first few words of the article, not just the title. This looks strange, and I’d like the mobile version to be exactly the same as the desktop layout in that regard — show only the title, until it slides up.

Is there a line-height CSS issue or something with the mobile layout that I need to fix? Any thoughts on this are very much appreciated.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#484106

Hi again,

You can try to add this css rule:


.ja-slidenews-cover h3 {
line-height: 40px;
}


to file: /templates/ja_mero/css/custom.css

🙂

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#484277

I’ve tried that, but it doesn’t seem to do any good, despite clearing cache.

Other suggestions? I appreciate your continued help with this.

Matt

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#484679

Dear Matt,

I tried to add above css rule to less file of this module: /templates/ja_mero/less/mod_jasidenews.less

line 80:

.ja-slidenews-cover h3 {
font-family: 'open_sans_semiboldregular';
font-size: @BaseFontSize;
margin: 0;
padding: 10px 0;
line-height: 40px !important;
}

It seem to work now 🙂

[Author]

Posts