Responsive headlines/text

[David Martin – Support]

Hey,

Add it to the column and add the CSS to your theme options. Once done, let’s test this and report back how it is looking.

I can best advise you from there.

Cheers,
David.

[SchlenzigxJones]

Hi David,

I inserted the css in the theme option css (not the wordpress editor) and given the column (with the red headline) the extra class. The two other places on the frontpage with the problem is both rows, so in those cases i’ve given the row the extra class.

In the top hero area, there is no problem with the spacing, and I haven’t even set the spacing to only show on some screens?

Anyway, there is no change in the spacing between headlines, text and buttons.

Please advice.

/M

[David Martin – Support]

Hi,

The CSS is for this section referenced in your image: http://www.swiftideas.com/wp-content/uploads/2015/11/Sk%C3%A6rmbillede-2015-11-02-kl.-22.42.49.png

I’ll check this now.

Thanks,
David.

[David Martin – Support]

Hi,

Please check now on your iPhone, I have added the class responsive-modification to the Row.

And updated the CSS to this:

@media only screen and (max-width: 767px) {
.responsive-modification .spb-column-container.col-sm-6 {
    min-height: auto!important;
}
.responsive-modification .spb_content_element.col-sm-8.spb_text_column {
    min-height: auto!important;
    margin-bottom: 0;
}
.responsive-modification .blank_spacer {
    height: 25px!important;
}
.spb-row-container.spb-row-full-width .spb-column-container .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    min-height: inherit!important;
}
}

Thanks,
David.

[SchlenzigxJones]

Hi David,

It looks great on all the sections. But for some reason the images have disappeared on the iphone. Is that because it is on a row?

Also, if I would like a little more space between, for example, the text and button, which numbers should i tweak?

/M

[David Martin – Support]

Hey,

Great, what images disappear – that code should not change anything outside of the specific extra class.

Re spacing, adjust the min-heights.

Thanks,
David.

[SchlenzigxJones]

This reply has been marked as private.

[David Martin – Support]

Ah, understood!

Please take a look now, I needed to specify a height for the parallax image on small screens. I have now also commented the CSS so if you want to adjust the values, you know what changes what elements.

@media only screen and (max-width: 767px) {
/* Image Height */
.responsive-modification .spb-column-container.col-sm-6 {
    min-height: 480px!important;
}
/* Text Content Height */
.responsive-modification .spb_content_element.col-sm-8.spb_text_column {
    min-height: auto!important;
    margin-bottom: 0;
}
/* Spacer Height */
.responsive-modification .blank_spacer {
    height: 25px!important;
}
}

Cheers,
David.

[SchlenzigxJones]

Beautiful.

Thank you so much.

[David Martin – Support]

No problem, happy to help you.

– David.