Hi,

Please try this

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

/* your css rules for ipad portrait */

}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {

/* your css rules for ipad landscape */

}

there is also this one which includes ipad mini

/* All iPads Portrait & iPad Mini Landscape */

@media only screen and ((width:768px) and (resolution:132dpi or resolution:263px)) or ((width:1024px) and (resolution: 163dpi)) {



}



/* Only iPad 1 & 2 Portrait & iPad Mini Landscape */

@media only screen and ((width:768px) and (resolution:132dpi)) or ((width:1024px) and (resolution: 163dpi)) {



}

This website provide a lot of variations for ipad and ipad mini for different versions of ipad http://www.stephentgilbert.com/mediaqueries/#iPad

Reference:

http://stackoverflow.com/a/9504571/1245478

http://css-tricks.com/forums/topic/target-ipad-ipad-only/

http://i-skool.co.uk/mobile-development/how-to-target-ipad-mini-in-css-media-queries/

Thanks,

Nick

Hi,

I have a feeling you made some edit to the template files that is messing up the entire page. Because I took 3 of your photos and made a gallery with them. I am not seeing the problems you are experiencing. and everything looks nice and neat as you can see http://i.imgur.com/EvnraaY.jpg

Try this css to center the text

#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {

text-align: center;

}

#top div .avia-gallery {

text-align: center;

}

Now try this

.avia-gallery-thumb {

margin: 0 auto;

width: 591px;

}



#top div .avia-gallery img {

width: 100%;

float: left;

}

#top .avia-gallery .avia-gallery-thumb a {

float: right;

}

With this css, I got your page to look like this http://i.imgur.com/A6yYN84.jpg .

Also please try to use images with a consistent height as the thumbnail, people can click on that image and see the full version.

Thanks,

Nick

Hi,

From what I see, your text captions are identical to the tooltips. So you want the text to show up static under each image, and then to have the identical text popup in a tooltip on hover on top of the image?

Please try changing the code you pasted above

$thumbs .= " <a href='".$link[0]."' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /><span class='avia-gallery-caption>{$caption}</span</a>";

to look like

$thumbs .= " <a href='".$link[0]."' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /><br /><span class='avia-gallery-caption>{$caption}</span</a>";

Thanks,

Nick

Glad Ismael could help :)

Let us know if you have any other questions or issues.

Regards,

Devin

Hi rapinion,

Our queue system goes by oldest post to newest so each time you self respond it actually pushes the topic to the end. I would have responded yesterday but this last post pushed it until I’m just getting to this point now.

It doesn’t look like any of your images have had their thumbnails created. Run the plugin mentioned above completely now that the content is live so that the images have their thumbnails created for all of the theme uses: http://wordpress.org/plugins/regenerate-thumbnails/

Regards,

Devin

Hi LouisLeedham,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top.page-id-1167 .main_color .input-text,

#top.page-id-1167 .main_color input[type='text'],

#top.page-id-1167 .main_color input[type='input'],

#top.page-id-1167 .main_color input[type='password'],

#top.page-id-1167 .main_color input[type='email'],

#top.page-id-1167 .main_color input[type='number'],

#top.page-id-1167 .main_color input[type='url'],

#top.page-id-1167 .main_color input[type='tel'],

#top.page-id-1167 .main_color input[type='search'],

#top.page-id-1167 .main_color textarea,

#top.page-id-1167 .main_color select {

background-color: #37589B;

border-color: #888;

color: #fff;

}

I’ve added in all of the form field selectors that you could need and made each initial selector target that specific page ID. So if you wanted this to work on another page you would just need to change the page-id-#### selector in the css above.

Modify the color codes for each property value as needed.

Regards,

Devin