Mobile/desktop image | PenciDesign Support

PenciDesign replied

7 years ago

Staff Reply

Hi,

Please try replace the code I sent to this code:

@media only screen and (max-width: 767px) {
.standard-post-special_wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    padding: 0 5px !important;
    margin-bottom: 15px;
    background: transparent;
}
.penci-body-single-style-8 .penci-move-title-above:after, 
.penci-body-single-style-5 .penci-move-title-above:after, 
.penci-body-single-style-6 .penci-move-title-above:after, 
.penci-body-single-style-7 .penci-move-title-above:after{
    content: "" !important;
    display: block;
}
.container-single .penci-standard-cat .cat > a.penci-cat-name,
.container-single .post-box-meta-single span,
.container-single .header-standard .post-title{ color: #fff; }
}

Best Regards,

PenciDesign

justgotravelling replied

7 years ago

Customer Reply

Hi,

Thanks for this. It partially worked, the only thing that is missing is that on the desktop version, the feature image is slightly faded, so the writing stands out. Is there coding for this to be done on the mobile as well please? If you view the desktop version you will see what I mean.

Thanks

PenciDesign replied

7 years ago

Staff Reply

Hi,

1/ Please try again with this code:

@media only screen and (max-width: 767px) {
.standard-post-special_wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    padding: 0 5px !important;
    margin-bottom: 15px;
    background: transparent;
}
.container-single .penci-standard-cat .cat > a.penci-cat-name,
.container-single .post-box-meta-single span,
.container-single .header-standard .post-title{ color: #fff; }
}

Best Regards,

PenciDesign

justgotravelling replied

7 years ago

Customer Reply

Hello,

/1 Did not work, it leaves a blank white line through my featured picture.

/2 Worked great thank you.

PenciDesign replied

7 years ago

Staff Reply

Hi,

1/ Please add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 767px) {
.standard-post-special_wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    padding: 0 5px !important;
    margin-bottom: 15px;
}
.container-single .penci-standard-cat .cat > a.penci-cat-name,
.container-single .post-box-meta-single span,
.container-single .header-standard .post-title{ color: #fff; }
}

2/ Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 480px) {
.wp-block-gallery.aligncenter, .wp-block-gallery.alignleft, .wp-block-gallery.alignright{ display: block; }
.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item{ width: 100%; }
}

Best Regards,

PenciDesign

justgotravelling replied

7 years ago

Customer Reply

Hi,

Thank you, that worked great!

Another 2 questions:

1. On our current layout, the title of the blog post is over the feature image, however on the mobile the title is located underneath the image. Is there a way for the title to be over the image in mobile mode like it is on the desktop?

2. Currently, we have some pictures within the blog post set side by side each other because it looks more pleasing on desktop, nice and big. However, in mobile mode the pictures side by side look too small. Is there a way to make the images separate underneath one another in portrait mode via mobile only?

Thank you,

JustGoTravelling

PenciDesign replied

7 years ago

Staff Reply

Hi,

With your currently Single Post Style, you can add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 480px){
.single .penci-single-featured-img{ padding-top: 100% !important; }
}

Change value 100 to value as you want on mobile.

Best Regards,

PenciDesign

justgotravelling started the conversation

7 years ago

Conversation Start

Hello,

When designing my website, I wish for my hero images in my blog posts to be landscape on desktop but portrait in mobile view. Is this possible? I can not see an option anywhere which suggests it is. However, other websites I have seen can do this.

At the moment, when I change the hero images, it changes it for both desktop and mobile. If I changed to portrait it looks fine on mobile but then the desktop looks huge and out of proportion.

Thanks,

JustGoTravelling