Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • August 10, 2015 at 1:46 pm #485289
    nini_bacher

    Hello Kriesi-Team,

    I tried to make the background images in the color sections of this site http://groovin-organization.com/ responsive by using “strech to fit” and “center center” alignment, still the images are displayed cropped on my mobile phone.

    Could you offer a solution for this?

    Cheers,

    August 10, 2015 at 4:20 pm #485428
    Elliott

    Hey nini_bacher!

    Are you viewing in portrait mode? There just isn’t much that can be done here unfortunately. Not unless you upload an image with a portrait aspect ratio.

    If you want we can force the image into your phone screen dimensions with CSS but then it would look distorted.

    Cheers!
    Elliott

    August 10, 2015 at 4:29 pm #485433
    nini_bacher

    Thank you for your response Elliott,

    I’m afraid I don’t understand ” unless you upload an image with a portrait aspect ratio.”

    I could prepare alternative images that appear depending on the screen width, I then would need the correct media queries, right?

    August 11, 2015 at 2:25 pm #485950
    Andy

    Hey!

    “unless you upload an image with a portrait aspect ratio” = a portrait image (opposite of landscape image).

    And yes, you are right, you could try to use extra images only for mobile which you can hide on desktop devices and show on mobile devices using media queries.

    Best regards,
    Andy

    August 11, 2015 at 2:43 pm #485959
    nini_bacher

    Hello Andy,

    thank you for your response. So the difference is 3:2 and 16:9?

    Where do I have to put the media queries? Into the quick CSS?

    Cheers,

    August 12, 2015 at 12:33 pm #486459
    Andy

    Hey!

    no, the difference is between a vertical format and a horizontal format.

    Yes, a code wrapped by media queries goes to quick CSS field.

    Regards,
    Andy

    August 12, 2015 at 12:44 pm #486467
    Guenni007

    there are not only media queries for screen width even for aspect ration and orientation portrait / landscape are possible
    e.g:
    @media (orientation: portrait)

    or even for retina settings you can have rules here:

    @media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}
    August 12, 2015 at 12:49 pm #486473
    Andy

    Hi!


    @Guenni007
    Thank you as always. I think this information will be quite useful for the thread owner.

    Cheers!
    Andy

    August 12, 2015 at 7:18 pm #486744
    glowingdoor

    Hello, I have this same concern, so thought I’d jump in here instead of starting a new thread. This was an issue for me using other themes (first time I’ve used this theme.) and the solution was to create an option within the visual editor for different mobile versions of the background to change for the mobile, tablet, desktop sizes changed. It was really helpful.

    I don’t know how to properly handle the media queries, so I’m not sure what to do to make it function smoothly using that option. How do I turn off/on the background using the css/media queries? Do I just use the code above and use “background-image: url” for each?

    Thank you for your help!

    August 12, 2015 at 7:34 pm #486747
    glowingdoor

    I did find this to be helpful, however, it’s still cutting off an important part of my image because it’s not really shrinking it much, but could be helpful for others looking for this. https://css-tricks.com/perfect-full-page-background-image/

    I ended up just doing a fixed size to make it work:

    I created a section ID called #smallest-bg-mobile, then created the background size exact to the ratio to my image. (I attempted several other options such as % adjustments and didn’t work for me. I’ll keep this one until I learn otherwise!)
    @media only screen and (max-width: 767px) {
    #smallest-bg-mobile { background-size: 767px !important; height: 271px !important;}
    }

    If you have any other suggestions to make sure this is a clean/smooth background, please let me know! Thanks!

    • This reply was modified 9 years, 4 months ago by glowingdoor.
    August 13, 2015 at 8:34 am #487012
    Rikard

    Hi @glowingdoor,

    Not sure if you got your problem fixed or not? Please link to the site where we can see the problem if you should need any help.

    Best regards,
    Rikard

    August 14, 2015 at 9:50 am #487614
    nini_bacher

    Hello everyone,

    I decided to offer an alternative image via media queries for one of the images that was croped the most in mobile view (the image in the color section above “makers”. http://groovin-organization.com/#makers

    Do do so, I added this code to the quick css:

    @media only screen and (max-width: 640px) {
#makers .avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-fixed  avia-builder-el-80  el_after_av_hr  el_before_av_hr  av-minimum-height av-minimum-height-custom container_wrap fullsize { 

background-image: url(https://groovin-organization.com/wp-content/uploads/2015/08/groovin_organization_9108__makersmobile.jpg)
}
}

    But unfortunately it isn’t working. Do you have an idea why?

    Best regards,

    August 14, 2015 at 11:22 am #487656
    Andy

    Hey!

    I think a semicolon is missing in your code. Use this one instead:

    @media only screen and (max-width: 640px) {
#makers .avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-fixed  avia-builder-el-80  el_after_av_hr  el_before_av_hr  av-minimum-height av-minimum-height-custom container_wrap fullsize { 

background-image: url(https://groovin-organization.com/wp-content/uploads/2015/08/groovin_organization_9108__makersmobile.jpg);
}
}

    Regards,
    Andy

    August 17, 2015 at 6:11 pm #489053
    TracyLove

    I just want the background image to be responsive and fit to the width of whatever screen it’s on. Is that not possible?

    August 18, 2015 at 9:25 am #489306
    Andy

    @TracyLove
    Responsive does not mean it will automatically fit to any screen, instead it means that you can control different behaviors on different screen sizes. You can make a background image fit 100% to the width with:

    background-size: 100%;

    Regards,
    Andy

    August 19, 2015 at 12:54 pm #489998
    nini_bacher

    Hi Andy,

    thank you for the new code. The alternative picture still isn’t loading on mobile devices. Do you have any further suggestions?

    Best regards,

    August 19, 2015 at 1:45 pm #490030
    Andy

    @nini_bacher
    As you are the thread owner: please post admin access here so we can take a closer look. Put the code into Quick CSS field. Post login details here as private reply.

    Regards,
    Andy

    August 20, 2015 at 4:23 pm #490880
    nini_bacher

    Hi Andy,

    thank you for your reply.

    August 20, 2015 at 5:35 pm #490946
    Andy

    Hi!

    try with an !important:

    @media only screen and (max-width: 640px) {
#makers .avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-fixed  avia-builder-el-80  el_after_av_hr  el_before_av_hr  av-minimum-height av-minimum-height-custom container_wrap fullsize { 

background-image: url(https://groovin-organization.com/wp-content/uploads/2015/08/groovin_organization_9108__makersmobile.jpg) !important;
}
}

    Regards,
    Andy

    • This reply was modified 9 years, 4 months ago by Andy.
    August 20, 2015 at 6:41 pm #490998
    nini_bacher

    Hi Andy,

    thank you for your message, still isn’t working. Any further ideas?

    Cheers,

    August 25, 2015 at 10:26 am #492751
    Andy

    Hey!

    I added this code on the very top of your Quick CSS field: 

    @media only screen and (max-width: 640px) {
div#makers {
background-image: url(https://groovin-organization.com/wp-content/uploads/2015/08/groovin_organization_9108__makersmobile.jpg) !important;
}}

    and now it your mobile is image is showing up for me. Please review your website now.

    Regards,
    Andy

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.