mobile layout | PenciDesign Support

SDial replied

4 years ago

Customer Reply

That worked! Thanks very much for your help!

PenciDesign Supporter replied

4 years ago

Staff Reply

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

4 years ago

Customer Reply

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!

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

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

Regards,
PenciDesign.

SDial replied

4 years ago

Customer Reply

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;
  }
}

PenciDesign Supporter replied

4 years ago

Staff Reply

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

4 years ago

Customer Reply

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!

PenciDesign Supporter replied

4 years ago

Staff Reply

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

4 years ago

Customer Reply

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

Thanks!

PenciDesign Supporter replied

4 years ago

Staff Reply

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

4 years ago

Customer Reply

https://the-gleaner.com

Thanks very much!

PenciDesign Supporter replied

4 years ago

Staff Reply

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 started the conversation

4 years ago

Conversation Start

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!