Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2111308
Mobile/desktop image
Closed

Comments

  • justgotravelling started the conversation
    August 10, 2019 at 9:51am

    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

  •  2,700
    PenciDesign replied
    August 11, 2019 at 3:57am

    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 replied
    August 11, 2019 at 4:44am

    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

  •  2,700
    PenciDesign replied
    August 11, 2019 at 10:33am

    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
    August 13, 2019 at 10:53am

    Hello,


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


    /2 Worked great thank you.

  •  2,700
    PenciDesign replied
    August 13, 2019 at 3:59pm

    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
    August 20, 2019 at 10:16am

    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

  •  2,700
    PenciDesign replied
    August 20, 2019 at 1:43pm

    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