Joomla Templates Club 406,261 posts

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#193173

Dear JA,

I have finished overriding my JA Brisk default styling template using “custom.css” file.. but it only for size >1024pixel.

how about the others tablet/smartphone size.? how to put in “custom.css” file.?

when I using this Device Media Queries into custom file, nothing happen:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#516179

Hi

You need to use the same as used in the templatesja_briskcssbootstrap-responsive.css

@media (min-width: 768px) and (max-width: 979px) {
for example

1 user says Thank You to pavit for this useful post

1. wan fadli

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#516204

<em>@pavit 402955 wrote:</em><blockquote>Hi

You need to use the same as used in the templatesja_briskcssbootstrap-responsive.css

@media (min-width: 768px) and (max-width: 979px) {
for example</blockquote>

Hi Pavit,

in the bootstrap-responsive.css file only have the media width for 768px – 979px.. how about the others size.?

or i need to write my own code for media device.? if so, what size should i put.

thank you

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#516220

Hi

The bootstrap-responsive.css file manage all media sizes open it and check what you want to change then copy new values in your custom.css file

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#516292

Hi wan fadli,

As @pavit replied to you. You need to use this code in file templatesja_briskcssbootstrap-responsive.css, and depending the device you are using, you need to change the min-width and max-width is suitable for your device.

@media (min-width: 768px) and (max-width: 979px) {
/*custom your css in here */
}

Regards,

Nazario A

1 user says Thank You to Nazario A for this useful post

1. wan fadli

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#516573

<em>@Nazario A 403085 wrote:</em><blockquote>Hi wan fadli,

As @pavit replied to you. You need to use this code in file templatesja_briskcssbootstrap-responsive.css, and depending the device you are using, you need to change the min-width and max-width is suitable for your device.

@media (min-width: 768px) and (max-width: 979px) {
/*custom your css in here */
}

Regards,

Nazario A</blockquote>

Hi @pavit and @navario A, thanks for the reply…

so, I can override the default styling by copy the styling from boostrap-responsive.css , and paste it into custom.css right.?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#516581

<blockquote>so, I can override the default styling by copy the styling from boostrap-responsive.css , and paste it into custom.css right.?</blockquote>

Yes right you can do in this way and customize it as you wish

1 user says Thank You to pavit for this useful post

1. Nazario A

[Author]

Posts