Colour section images being scaled up (related – GRID ROW RETINA issue)

Hi Guys,

Thanks for a great theme. Im working on a clients site http://www.dreamtexltd.com

I have a few issues Im hoping you can help out with.

1. Color sections with image bg.

First off…I have portfolio pages built with advanced builder.

Using colour sections as the first element on the page for a fullscreen image. (this is also happening on the home page 2nd section)

Set at 100% of browser height

No repeat (I tried stretch to fit and it has no change)

For some reason the images are being enlarged slightly and cropping some of the image off, can you take a look at this?

This is happening at all screen sizes. It is noticeable on some of the portfolio pages more than some of the others. The images are 2560 x1440px (16:9)

So I inspected element and came to here:

https://drive.google.com/file/d/0B_4yPg5NFl4UM2dhVEVjLXpCQTA/view?usp=sharing

https://drive.google.com/file/d/0B_4yPg5NFl4UaWtoaktwMFl4Nms/view?usp=sharing

If i set my browser to fullscreen (27in iMac) and play with the values setting the height to 1440px and reduce the webkit-transform: translate by 100-150px this displays how I want the image to look.

What controls/calculates these values? and how can I edit the way my images are being displayed.

Its as though the bottom of my browser is lower than it actually is making the image enlarge. Can this be reduced?

To best illustrate the issue I have set up the portfolio page http://dreamtexltd.com/portfolio-item/jcb/best show the issue.

At the top I have also placed a fullwidth slider set to original dimensions of the image…this handles the image and gives the desired look I need (no cropping)…however by adding this element it breaks the navigation for the portfolio…as in removes it completely.

Below this is the colour section using 100% browser height with the same image…you can see the difference in scaling on the image and the crop of the JCB…There’s too much

Basically I need the look of the fullwidth slide at the top whilst keeping the portfolio nav buttons left and right as all images have been produced to this dimensions already

Also whilst Im on this…when viewing on iPad 4 (retina) the same colour section image (every portfolio page) ignores and image alignment (i.e. top-center…centre-centre etc) and looks like it is set at bottom-centre….is this just the way the theme works or is something not working correctly on our site?

Which then brings me to issues 2 & 3 (iPad – Retina related – not sure about non-retina as I don’t have access)

https://drive.google.com/file/d/0B_4yPg5NFl4UaXd2bThveUlIQWs/view?usp=sharing

2. The menu when viewed in portrait mode on the same iPad switches to mobile mode however the desktop menu is still there behind the menu icon (screenshot)…how do I keep the mobile menu and remove the desktop? I have tried bits of snippets (obviously not correct ha!)

3. The grid row on the contact page is not collapsing to show each grid column individually (like on mobile) when on retina iPad – I’d like it to do so if possible (again there may be some CSS below that relates to this but is not correct)

Here is my custom CSS is there anything in there that could be causing these problems?

.main_color .avia-color-theme-color-subtle {
background-color: #ea5a2b;
color: #fff;
}
.slideshow_caption {
width: 59%;
}

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title
{
background: #000;
filter: alpha(opacity = 80);
background: rgba(0, 0, 0, 0.5);
display: inline-block;
margin: 0 0 1px 0;
padding: 10px 3px;
}
#top .scroll-down-link {
height: 90px;
width: 80px;
margin: 0px 0 0 -40px;
line-height: 20px;
position: absolute;
left: 50%;
bottom:15px;
color: #FFF;
text-align: center;
font-size: 90px;
z-index: 100;
text-decoration: none;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

-webkit-animation: avia_fade_move_down 2s ease-in-out infinite;
animation: avia_fade_move_down 2s ease-in-out infinite;
}

.widgettitle {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.1em;
margin-bottom: 20px;
color: #777 !important;
}
div .av_one_fourth {
margin-left: 2.5%;
width: 23%;
}

@media only screen and (max-width: 989px) {
#scroll-top-link { display: block!important; }}

span.scroll-down-text {
height: 60px;
width: 80px;
margin: 0px 0 0 -40px;
position: absolute;
left: 50%;
bottom: 0px;
color: #FFF;
text-align: center;
font-size: 20px;
z-index: 100;
text-decoration: none;
}
#top .avia-post-nav{
background: rgba(0,0,0,0.4);
border: 1px solid #ea5b2b;
}

.main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content,
.main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a,
.main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title,
.main_color .related-format-icon, .grid-entry .main_color .avia-arrow,
.main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img,
.main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon,
.main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current,
.main_color.avia-fullwidth-portfolio .pagination a, .main_color .av-hotspot-fallback-tooltip-inner,
.main_color .av-hotspot-fallback-tooltip-count {
background-color: #41235d;
color: #ea5b2b;
}

Thanks

Ric