Navigation ccs for attachment page

hi

we want different navigation for each device can u help us with the css for the navigation buttons on the attachment.php

example page http://www.tollywoodfans.in/44974/regina-cassandra-photos-at-shourya-promotional-event/regina-cassandra-photos-2-14/

This is defined for desktop for now ..

Hi

To apply a different style on mobile devices you can use media queries like this:

@media (max-width: 768px){
.css-class-of-the-element{
color:red
}
}

This is just a basic example but works like this: for screens smaller then 768px apply a red color for the element with this css class: .css-class-of-the-element. You have to replace this expression with the real selector of the element of which’s style you want to change.
Note that this is a complex task which require good css coding skills and many tests in order to be accomplished. If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we can’t offer customization services at the moment.

Thanks!

i tried this but the image is not response … i have the code

.col_large_gal {width:875px;float:left;margin:2px 2px 0 2px;} which is c

i think the above code is crating some problem for responsive…can u help me having the above in a responsive manner

Hi

This css is not responsive because apply the same style an all devices. I mentioned in my above reply the you can use media queries to add responsiveness for a specific element. In your case the could could be like this:

@media (max-width: 768px){
.col_large_gal {
/* style for mobile goes here */
}
}

For more details about media queries usage check this link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Thanks!

Thanks for the info … i tried this add is that correct

@media (min-width: 1201px){
.col_large_gal {width:875px;float:left;margin:2px 2px 0 2px;}
}

@media (min-width: 1019px) and (max-width: 1200px){
.col_large_gal {width:790px;float:left;margin:2px 2px 0 2px;}
}

@media (min-width: 768px) and (max-width: 1018px) {
.col_large_gal {width:700px;float:left;margin:2px 2px 0 2px;}
}

@media (max-width: 767px){
.col_large_gal {width:675px;float:left;margin:2px 2px 0 2px;}
}

@media (max-width: 480px) {
.col_large_gal {width:425px;float:left;margin:2px 2px 0 2px;}
}

Hi

Technically speaking the code is correct. I am not sure how works on the page as I didn’t test it but if it works fine on your side you can use it.

Thanks!