Joomla Templates Club 406,261 posts

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#956077

Dear support, I’m using this custom code (provided by you) in my custom.css file:

.magazine-featured-intro .col.col-sm-12.magazine-item {
    min-height: auto !important;
    padding-bottom: 0px !important;
}

.magazine-featured-intro .col.col-sm-12.magazine-item .item-image {
    float: left !important;
    width: auto !important;
    max-width: 100% !important;
    padding-right: 30px;
    max-height: 100% !important;
}

.magazine-featured-intro .col.col-sm-12.magazine-item .magazine-item-main {
    float: left;
    width: 460px;
}

This is great in standard view, but it’s not properly optimized on tablets and smartphones views. How can I add more lines to defines rules for tablets and smartphones? What is the proper code to be used?

.magazine-featured-intro .col.??????.magazine-item .magazine-item-main {

Thanks in advance, Federico

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

#956263

Hi Federico,

The template is built with T3 framework which implements Bootstrap, you can use Media Queries to define rules for specific view port: http://getbootstrap.com/css/#grid-media-queries

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#956471

Dear @saguaros,
I see, thanks for your feedback.
I’m trying as suggested, to optimize smartphone view, but It’s not working. Is it correct?

@media (min-width: @screen-sm-min) {
.magazine-featured-intro .col.col-sm-12.magazine-item .magazine-item-main {
    float: left;
    width: 100%;
}
}

Regards,
Federico

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

#956472

Hi Federico,

You will use the variable @screen-sm-min when you change in LESS file. And if your site is running with Development Mode, just refresh the front page to see the change, if Dev mode is OFF, you need to compile less to css first (REMEMBER to backup all css files first).

In case you want to change in CSS file instead, you should use query like this (apply for mobile view port):

    @media (max-width: 360px) {
    .magazine-featured-intro .col.col-sm-12.magazine-item .magazine-item-main {
        float: left;
        width: 100%;
    }
    }

360px here is maximum width of view port which will take affect from defined css rule.

I hope this makes senses.

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#957197

Dear @saguaros,
sorry if I didn’t reply yet.
I got a little bit crazy to optimize all the main views, but it’s working!

Thanks,
Federico

[Author]

Posts