Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #593043

    I need to hide a color box background image for smartphone size. I want the image overlay to remain. I searched your forum and sort of found an answer from an old post but am not sure how to assign a “unique id” to the color section.

    The site:
    http://www.potentialmatters.com
    the image is on the home page. its called:
    123rf-28387068-2560×933-smaller.jpg

    More specifically:
    <div class=”av-parallax-inner main_color avia-full-stretch” style=”background-color: #ffffff; background-repeat: no-repeat; background-image: url(http://www.potentialmatters.com/wp-content/uploads/2016/01/123rf-28387068-2560×933-smaller.jpg); background-attachment: scroll; background-position: bottom right; “></div>

    Thanks,
    Claudia

    #593629

    Hey cagraphicdesign!

    The background images are applied as inline style to color section. inline styles have the highest specificity and cannot be altered using custom CSS.

    If you like to make alterations or modify the image in mobile screens you need to remove the background image from color section and apply it using custom CSS.

    Add an ID to the color section and use the below css to remove background image in portable devices

    #bgimage{ 
    	background: #000 url(image.jpg);
    	background-size: cover;
    	background-position:center center;        
    }
    /* Home page section images on mobile */
    @media only screen and (max-width: 767px) {
    #bgimage{ 
    	background: #000!important;
    }
    }
    

    Regards,
    Vinay Kashyap

    #593660

    Hi Vinay
    Sorry but I am new to all this so please explain how I “add an ID to the color section”. Is it something that is already indicated in the media library?

    Next stupid question, in the second line of the css you have am I supposed to replace “(image.jpg) with the file name of that image?

    I just want that text to be displayed on a white background rather than over the image in mobile versions.

    Thanks
    Claudia

    #594329

    Hi!

    Don’t worry at all enfold is so easy to use you will get around these options in no time :)

    Drag and drop a color section then click on it to see the below screen and add you ID in the ID section

    in this line ” background: #000 url(image.jpg); ” only replace image.jpg with the image path example if your image is on path http://kriesi.at/wp-content/themes/kriesi/images/logo.png

    The code for it will be

    ” background: #000 url(http://kriesi.at/wp-content/themes/kriesi/images/logo.png); ”

    Regards,
    Vinay Kashyap

    #594420

    OK. I am getting close! But I do not see the change take place. First, there was no custom css edit area the is shown in your screenshot so I researched and found the answer…I added a line of php to the functions php file and it worked!
    Now I have both boxes!

    For the first box I put:
    cagd-white

    For the second box I think I am supposed to put that ID somewhere in the code you give me but not sure where. In the second box I now have:

    #bgimage{
    background: #000 url(http://www.potentialmatters.com/wp-content/uploads/2016/01/123rf-28387068-2560×933-smaller.jpg);
    background-size: cover;
    background-position:center center;
    }
    /* Home page section images on mobile */
    @media only screen and (max-width: 767px) {
    #bgimage{
    background: #000!important;
    }
    }

    #594747

    Hey!

    That’s great! yay… you just need to add class name or ID any one of them. Let’s go for class name.

    If you think it would be easy if i set it up for you and then you can have a look at the setup and make any changes you need please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    just to make sure we on the same page the image highlighted in green in screenshot below need to scale down in mobile version right?

    Best regards,
    Vinay Kashyap

    #595092

    Hi Vinnie
    It is very kind of you to offer to do this for me!
    Yes you are ALMOST correct. I was thinking of not scaling it down but just making it go away on mobile devices. . the client agreed to simply not show the image of the businesspeople so the text image could be seen more easily against a plain white background. Another problem is that the text image gets very small on an iPhone 5s so I did another version with real text rather than an image of text. That version is really the proper way to do it, although its harder to get the text to look just right. I am waiting for the client to approve it. I would like you to configure that version as well as the current home page image. I duplicated the home page to create that alternate version with actual text . That page is http://www.potentialmatters.com/home-with-text/

    The information you need is in the Private Content area

    Thanks again !

    #595287

    Hi!

    We are working on your ticket please wait while we update the results here soon.

    Please check the homepage now

    We added the below CSS to quick CSS and class name “custom-bg-1” to the color section and removed the background image from the color section.

    /* Color Section Bg Image*/
    .custom-bg-1 {
    background: #FFF url(https://www.potentialmatters.com/wp-content/uploads/2016/01/123rf-28387068-2560x933-smaller.jpg);   
    background-size: cover;     
    background-position:bottom right; 
    }
    @media only screen and (max-width: 767px) {
      .custom-bg-1 {
    background: #FFF !important;   
    background-size: cover;     
    background-position:center center; 
    } 
    }

    Your text looks pretty close to the image instead of using different lines by hitting the Enter key which create a new <p> tag use one single line with <br> where ever you need a line break and adjust the line height and letter spacing using CSS.

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    #596909

    Thank you so much for this valuable information!
    And for helping with the css tweaking. Unfortunately, it over-rode the parallax function which is really important. I resolved it by reverting back and adding a solid white background behind the text…not perfect but the client is fine with it.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Hide a color box background image on smartphone’ is closed to new replies.