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 #3045154
mobile layout
Closed

Comments

  • SDial started the conversation
    May 16, 2022 at 7:47pm

    Hi,

    I would like my mobile layout to have images on the left with text on the right.  I'm using Block 12 with thumbnail set to left.  All looks good on desktop but the image goes to the top on mobile.  

    How can I set it so that it looks like the sample in the attachment?

    Thanks!

    Attached files:  mobile layout.png

  •  2,242
    PenciDesign replied
    May 17, 2022 at 1:21am

    Hi,

    Please send me the URL you've inserted the Block 12 content, I'll check and send you a custom CSS code.

    Regards,
    PenciDesign.


  • SDial replied
    May 17, 2022 at 2:10pm

    https://the-gleaner.com

    Thanks very much!

  •  2,242
    PenciDesign replied
    May 17, 2022 at 2:34pm

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    @media screen and (max-width: 480px) {
  .penci-block_12.penci_media_object {
      display: flex;
  }
  .penci-block_12.penci_mobj__img {
      width: 37.5%;
      margin-right: 20px;
  }
}

    Regards,
    PenciDesign.

  • SDial replied
    May 17, 2022 at 4:04pm

    Hi,
    This didn't seem to work.  Cleared caches and opened in incognito window, but unchanged.

    Thanks!

    Attached files:  Screen Shot 2022-05-17 at 11.55.53 AM.png

  •  2,242
    PenciDesign replied
    May 17, 2022 at 4:14pm

    Hi,

    Please modify the CSS code like this:

    @media screen and (max-width: 480px) {
  .penci-block_12.penci_media_object {
      display: flex!important;
  }
  .penci-block_12.penci_mobj__img {
      width: 37.5%!important;
      margin-right: 20px!important;
  }
}

    Regards,
    PenciDesign.


  • SDial replied
    May 17, 2022 at 4:42pm

    I tried the new css, but unfortunately it also did not work. If I pull the screen over to a smaller size, I does what it should do, but if I look at my phone or in tools/responsive mode, it does not. 

    Thanks again!

    Attached files:  Screen Shot 2022-05-17 at 12.36.46 PM.png

  •  2,242
    PenciDesign replied
    May 17, 2022 at 7:44pm

    Hi,

    Are you using any cache plugin? I've checked your site and not found the code in the page source.

    Regards,
    PenciDesign.


  • SDial replied
    May 17, 2022 at 7:45pm

    Thank for getting back.


    I removed the code when I found that it wasn't working.  I'm putting it back in, in case this is of help to you.

    This is what I put in:

    @media screen and (max-width: 480px) {
  .penci-block_12.penci_media_object {
      display: flex!important;
  }
  .penci-block_12.penci_mobj__img {
      width: 37.5%!important;
      margin-right: 20px!important;
  }
}
  •  2,242
    PenciDesign replied
    May 17, 2022 at 7:46pm

    Hi,

    Please re-add it again, clear all the site cache then reply to this ticket.

    Regards,
    PenciDesign.


  • SDial replied
    May 17, 2022 at 8:00pm

    Hi,

    I've added it back to both CSS on page and in Customize.  Cleared cache at hosting level and via cache plugin on site.

    Thanks!



  •  2,242
    PenciDesign replied
    May 17, 2022 at 8:04pm

    Hi,

    Please modify the CSS code like this:

    @media only screen and (max-width: 480px) {
        .penci-block_12 .penci_media_object {
            display: flex !important;
        }
    .penci-block_12 .penci_mobj__img {
            width: 37.5% !important;
            margin-right: 20px !important;
        }
    }

    Regards,
    PenciDesign.



  • SDial replied
    May 17, 2022 at 8:11pm

    That worked! Thanks very much for your help!