Joomla Templates Club 406,261 posts

[bri2.0 Friend bri2.0Join date: February 2015Posts: 65Downloads:128Uploads:21 Thanks: 4 Thanked: 1 times in 1 posts]

#909235

Hello again,

Another issue – we have used ACM – Feature Intro on this JA Directory Template / style 1 – but need it to be responsive. I have some working but there is an issue with the layout when it’s on smaller devices. See attached image.
I tried to find answers in the forum, but nothing that has ultimately resolved.
What do I need to add to my .less file to make this align correctly. We are using .less not .css so appreciate if you can guide this with a less fix.

So far in template.less (local/less/theme/jagm03/) I have added;

// ——————————————————–
// ACM – FEATURES INTRO
// ——————————————————–
.acm-features {

.features-item {
// Mobile view
@media (max-width: @screen-xs-max) {
margin-bottom: @t3-global-margin;
}
// Tablet View SML – BA
@media screen and (min-width: @screen-sm) {
width: 100%;
margin-bottom: @t3-global-margin;
float: left;
}
// Tablet View – BA
@media screen and (min-width: @screen-md) {
width: 50%;
margin-bottom: @t3-global-margin;
float: left;

}
// Desktop View - BA 
@media screen and (min-width: @screen-lg) {
  width: 25%;
  margin-bottom: @t3-global-margin;
}

}
}

Many thanks
Britt

---

Attachments:

1. 

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

#909242

Hi
Apply my solution below to fix this issue
Go to /templates/Your JA Template/css/custom.css if there is no custom.css file, creat it manually
add below code in custom.css file

@media screen and (min-width: 992px)
{.acm-features .features-item {

    min-height: 305px;
} }

[bri2.0 Friend bri2.0Join date: February 2015Posts: 65Downloads:128Uploads:21 Thanks: 4 Thanked: 1 times in 1 posts]

#909248

Hi,

Can you please explain why I can’t place this in my template.less file.
We are trying NOT to use any .css and contain all our updates in the /local/ directory.
It is my understanding newer T3 templates use /local/ for all customization.

It’s very confusing in the documentation – but I know this /local/ is meant to be the place where all my custom styles are meant to be kept. I’d like to understand why you have given me a custom.css fix instead.

FYI – I tried adding this to my template.less file but no change.
I have asked this question before – and I’d really like to learn the answer.

Thanks
Britt

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

#909263

Hi
Local folder override the /css folder files , so when u update the template your file will be saved in the local folder files , they does not effected .
Custom.css is separate file , by this u can add new code and its does not effect on template updates at all .

[bri2.0 Friend bri2.0Join date: February 2015Posts: 65Downloads:128Uploads:21 Thanks: 4 Thanked: 1 times in 1 posts]

#909272

This reply has been marked as private.

[bri2.0 Friend bri2.0Join date: February 2015Posts: 65Downloads:128Uploads:21 Thanks: 4 Thanked: 1 times in 1 posts]

#909285

And so I tried this – which keeps everything in the template.less file and it works! and NO custom.css required.

.acm-features {

.features-item {
// Mobile view
@media (max-width: @screen-xs-max) {
margin-bottom: @t3-global-margin;
}
// Tablet View SML – BA
@media screen and (min-width: @screen-sm) {
width: 100%;
margin-bottom: @t3-global-margin;
float: left;
}
// Tablet View – BA
@media screen and (min-width: @screen-md) {
width: 50%;
margin-bottom: @t3-global-margin;
float: left;
min-height: 305px;

}
// Desktop View - BA 
@media screen and (min-width: @screen-lg) {
  width: 25%;
  margin-bottom: @t3-global-margin;
  min-height: 305px;
}

}
}

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

#909286

Hi
You can add it in template.css but i suggest you to use custom.css .
Let me explain you simply
Local folder is an override of the template folders and files like template.css file . It is used so u can update the template and the local folder does not effected .
Custom.css files is not a default files that comes with template , user need to add this manaully and it does not effect on any kind of update in template .
The difference is that local folder is used to override default files in template while custom.css is already a new files that does not need to override again .
If you still wish to add above code in template.css you can add it at the end of file .

[Author]

Posts