[guybower1Participant]

hi

I have done up a newsletter, both in Mailchimp and a version created in CS which will live at our website. It looks quite ok, but when I look at it on lower width screens, it is all over the place.

URL is feastthailand.com/index.php/newsletter

I am basically looking to have a 2 column newsletter with text and images alongside. As the screen width decreases, the images also decrease, but the text remains the same size, leaving long columns of text, much longer than the height of the images.

The look I am after is with the images and text blocks being around the same height. I assume I may have to create a unique text class for the newsletter and decrease the text through various media queries.

Would you mind having a look at the page and suggesting if that is correct or if there is a better way? When it is at its optimal size, it looks great, but then gets progressively out of wack, even going to center aligned text when it hits 767px.

Any input gladly accepted

cheers

[ChristopherModerator]

Hi there,

Images are responsive and if we force height, images will be stretch.
You can add image as column’s background, to do so add background-image: url(http://feast.2jwilelcpx2t.netdna-cdn.com/wp-content/uploads/2016/10/Jelly51.jpg); in column’s style field. Add padding to top and bottom of column to adjust the height.
Not that you can’t add link to columns.

Hope it helps.

[guybower1Participant]

hi Christopher

Thanks so much for your reply

The images are more wide than high, 1024 x 600, so I fear that is not going to solve the issue of text too high.

Is it possible to exclude some text at certain screen widths? The small snippets if text in the newsletter are really only teasers to get people to view the entire page of each article, so the amount of text showing is not entirely relevant. The relevant page of each article will have the full text.

I am just wondering if I can set exclusion points where at 1024px, only XXXXXX text shows, at 768px, that amount of text is reduced again and so on.

Is something like that feasible and what would it look like?

cheers

[ChristopherModerator]

Hi there,

Not exactly, but cornerstone has visibility option to hide/display specific sections/rows on different devices, see the attachment.

You can duplicate sections, hide it on large screens and remove unwanted text for mobile devices.

Hope it helps.

[guybower1Participant]

hi Christopher

Thanks so much for the reply.

Might work, I’ll give it a crack.

But would not using the show/hide html function work as well, possibly even better?

So if I set some individual div classes:

<div class="content">
    <div class="mystyle">this is the content for desktop</div>
    <div class="mystyle2">this is the content for tablet</div>
    <div class="mystyle3">this is the content for mobile</div>
</div>

Basically as many as would be needed and then, in CSS use something like:

@media all and (max-width: 979px) {

    .content .mystyle{display:block;}
    .content .mystyle2{display:none;}
    .content .mystyle3{display:none;}

}

@media all and (max-width: 767px) {

    .content .mystyle{display:none;}
    .content .mystyle2{display:block;}
    .content .mystyle3{display:none;}

}

@media all and (max-width: 479px) {

    .content .mystyle{display:none;}
    .content .mystyle2{display:none;}
    .content .mystyle3{display:block;}

}

I’m only grabbing some of this from online, but just curious if there is a way to target it this way

cheers

[ChristopherModerator]

Hi there,

You can try this code which is easier to manage :

<div class="content">
    <div class="cs-hide-md cs-hide-sm cs-hide-xs">this is the content for desktop</div>
    <div class="cs-hide-xl cs-hide-lg cs-hide-sm cs-hide-xs">this is the content for tablet</div>
    <div class="cs-hide-xl cs-hide-lg cs-hide-xl cs-hide-md">this is the content for mobile</div>
</div>

Please use provided classes and you don’t need to apply CSS anymore.

Thanks.

[guybower1Participant]

hi Christopher

Would using CS x-hide feature also work? Can you put in more than one class ID, so say I wanted a particular text element to hide from 1199px down, would I input the class x-hide-lg and all the smaller ones as well lg, md, sm and xs?

Just mulling over the best way to approach it

cheers

[ChristopherModerator]

Hi there,

Please check what each class hide:

cs-hide-xl : Hides content on screen larger than 1200px
cs-hide-lg : Hides content on screen width between 980px – 1199px
cs-hide-md : Hides content on screen width between 768px – 979px
cs-hide-sm : Hides content on screen width between 767px – 481px
cs-hide-xs : Hides content on screen smaller than 480px

You can use multiple classes and separate them with space just like what I did in previous replay example.

Hope it helps.

[guybower1Participant]

hi Christopher

Thanks again for your help on this one. I have the elements now hiding correctly through the various screen widths, which is satisfying.

May I ask how it is possible to have the text remain justified through the various screen widths? Once it hits 767px, all the text in the newsletter shifts to left aligned.

Regards

[JadeModerator]

Hi there,

Please add this code:

@media (max-width: 767px) {
    .page-id-3245 .x-text {
        text-align: justify !important;
    }
}

Hope this helps.

[guybower1Participant]

hi Jade

Thanks so much for your reply

Yes, that looked after the text, but unfortunately it took everything with it. I was able to realign the image and text at the bottom of the page to the center, so all good.

Thanks again

Regards

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts