Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #508058

    Hi Guys,

    Thanks for a great theme. Im working on a clients site

    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:

    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 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)

    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%;
    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;




    Hey Ric,

    There will always be some loss of image data since the image are set to cover the container area. Your example page gave me a 404, could you check please?



    Hi Rikard, sorry I missed a space when typing the url is (without the /best).

    You should see what I mean now with the top two images on the JCB page, and the left and right slide out nav buttons disappearing.

    Also is there a way to change the portfolio item url name?…as in change dreamtexltd dot com/portfolio-item/jcb

    Thanks for your time


    • This reply was modified 8 years, 10 months ago by bluebubble.


    1.) The background size property is set to “cover” by default to keep the aspect ratio of the image. However, it will:

    scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

    Setting the background size to 100% will distort the image.

    2.) Try to add this in the Quick CSS field:

    @media only screen and (max-width: 990px) {
         nav.main_menu {
             display: none;

    3.) Can you please provide a screenshot of this issue on retina display?

    Best regards,


    Hi Ismael,

    Thanks for the reply.

    1a, If the image is already large (2560×1440) 16:9 and my screen is the same 16:9 why is it scaling up the image more than it needs to? as an image this size should cover the majority of screen sizes…no? I know there will be certain screen ratios that this will be inevitable and there will be some cropping.

    1b. Also why does the navigation on the portfolio break if I put a slider as the first element?

    If this didn’t happen then I would be happy man and go with the slider as this is how I want it to look, please see the JCB page screenshots :)

    Even when the browser window is reduced by hand there is a lot of the image missing, so I thought I may be using the wrong element from the advanced builder, this is when I tried the fullwidth slider…bingo, however I cannot now click through to the previous/next portfolio item.

    This is the view I get:
    First element full width slider: (also would like the scroll down arrow on here too but there seems no option for this at present time)
    Second element: color section 100%

    You can see how much is being cropped, however I can’t have the slider as the left and right portfolio navigation disappears.

    2. Fixed, thank you.

    3. Sorry, I thought I had added the screenshot, here you go: (from before the menu fix)



    • This reply was modified 8 years, 9 months ago by bluebubble.

    Hi Guys,

    Any info on my last reply?

    Also another issue…the next/previous portfolio button disappear on mobile, is this supposed to happen? If so then how do I navigate to the next/previous portfolio item without having to go back through the menu?? I would like the buttons to display on mobile of portfolio…tablet is OK

    I figure that out. Still waiting on the previous issues though.



    • This reply was modified 8 years, 9 months ago by bluebubble.

    Hi again guys,

    So, I managed to fix the portfolio issue (1.) by adding the filter

    add_filter('avia_post_nav_settings','avia_remove_fullwidth_slider_check', 10, 1);
    function avia_remove_fullwidth_slider_check($settings)
    $settings['is_fullwidth'] = false;
    return $settings;

    to the functions.php to always display the nav buttons, this in turn has allowed me to have a full screen slider instead of the colour section and have my previous/next buttons back (and also on mobile)….result.

    Only issue left…is (3.) the grid not collapsing on retina iPad on the contact page…see reply

    Any quick fix for this?





    Sorry for the delay. Please refrain from bumping the thread because it will push it back to the end of the queue. :)

    1.) Did you set the Background Attachment to parallax? If yes, then there’s a script in the theme which calculates the width and height of the parallax container base on the dimension of the actual section container. It is actually larger than the section so it’s possible that you will not see parts of the images. The parallax container needs to be larger than the section container in order to create the parallax effect.

    2.) Glad you managed to fix the navigation with the filter.

    3.) Use this retina-specific css media query in the Quick CSS field:

    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
      /* Retina-specific stuff here */
        .responsive #top #wrap_all .av-flex-cells .no_margin {
        width: 100%;
        display: block;
        margin: 0;
        height: auto !important;
        overflow: hidden;
        padding-left: 8% !important;
        padding-right: 8% !important;

    Best regards,


    Hi Ismael,

    Thanks for the reply.

    Ah apologies….I wasn’t bumping per say, I just hadn’t heard anything from you guys (not a problem) so just kept updating/editing when I fixed something. Will refrain next time and wait for a response. :)

    Yes I had the image set to parallax, it is great feature, one that i love, however for this site with these particular images and the way they need to display as the portfolio page head… it just didn’t work for me, the filter addition is ideal as I can add the slider (with only one image) with hidden controls…bingo.

    3. Fixed, brilliant. I just need to re-up a more suitable image of the office now.

    Thanks for you time and help Ismael, (and team Kriesi)

    Greatly appreciated.


    P.S. I am probably 65% of the way through this site….so I may be back at some point for more fantastic support, this thread can be closed




    Great, glad we could help. We’ll be happy to help you out with any further problems you might have :-)

    Best regards,

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Colour section images being scaled up (related – GRID ROW RETINA issue)’ is closed to new replies.