Mobile View – Background Image on Color Section + Blog Featured Image

Hey bulewold,

The reason only a portion of the image show is because it is a landscape image and is set to stretch. Solution for this is to have 2 set of images for each section.

1. Create background images for mobile view.
2. Add a unique ID for each color section.
3. Use the below CSS and replace the unique ID for each section.

Example: For the first color section let’s give a unique ID #mobile-bg-1

@media only screen and (max-width: 767px) {
    #top #mobile-bg-1{
        background-image: url(https://awllpaper.com/wp-content/uploads/2018/01/free-background-wallpaper-for-phone-phone-backgrounds-wallpaper-free-download.jpg)!important; 
     }
}

Replace the ID name and image URL for each section.

Best regards,
Vinay

Hi,

You can use the below CSS rule inside the previous code

background-position: 0% 100%

Please check this link for more info about background position https://css-tricks.com/almanac/properties/b/background-position/

Sorry I missed the second issue, I’m not sure if that image is coming as a ALB image element or it was added from the featured image option available on the bottom right side of the page.

Please check the link in private for more info.

If you still have any issue we need to check your site please provide admin login in private content.

Best regards,
Vinay

Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Vinay

Hi,

We have added the below code to Quick CS

@media only screen and (max-width: 767px) {
.responsive .template-blog .blog-meta, .responsive .post_author_timeline, .responsive #top #main .sidebar {
    display: block;
}
.responsive .content .entry-content-wrapper {
    width:100%;
    padding-top:50px;
}
}

Best regards,
Vinay

Hi,

The below code is to adjust the image for the mobile view

@media only screen and (max-width: 767px) {
    #top #home-section1 {
        background-image: url(image.jpg)!important; 
        background-position: 50% 50%;
     }
}

Adjust the background position for desktop from color section options or use the below css.

#top #home-section1 {      
        background-position: 0% 50%!important;
     }

Best regards,
Vinay

Hi,

Please try adding !important to the position rule

/* BG adjustment for Mobile */
@media only screen and (max-width: 767px) {
#top #home-section1 {
background-image: url(https://fwiwappraisals.com/wp-content/uploads/2018/02/bnr-391701547.jpg)!important;
background-position: 0% 50%!important;
}
}

Best regards,
Vinay

Hi,

Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay