padding issues

[micheal_w]

Hi Guys,

I have few small issues on a site I am currently developing, if you could help to solve them, that would be much appreciated. Please note that a maintenance plugin is in use on the site, so you must sign in to the admin first to see the front end.

1. I would like to replicate one of your demo page: http://swiftideas.com/form-demo/our-story

So far I did it http://www.thepicnicstreet.com.au/the-beach-people, however if the screen size is smaller than 1170px but larger than 770px, the photos doesn’t fill in their column, see attachment (pic1). In your demo, there is no such an issue like this, any idea what am I doing wrong?

2. I am using header layout 3 with text/shortcode enabled on the Header Right Config. I have pasted the below shortcode into the ‘Header right text config’ section, however as you can see on the attached image pic2 (and on the front end), it isn’t at the right place, it stucked to the top.
[sf_button colour=”white” type=”sf-icon-reveal” size=”standard” link=”http://” target=”_self” icon=”fa-cutlery” dropshadow=”no” rounded=”yes” extraclass=””]LET’S PICNIC![/sf_button]

+ one question:
If I am not happy with how a page looks on mobile, I thought I may re-create the content twice on the same page. The visibility for the first lot would be only for Desktop and the second only for mobile. If I do this, would this slow down the loading of the page, having the information & pictures twice in the “back” or the system know automatically everything? 🙂

Thank you!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

You need to make a Row for each two columns, then add Remove Element Spacing
Ex:

Row
	- Left Image
	- Right Text

Row
	- Right Image
	- Left Text

2)

Please test this, add this CSS to your theme options:

.aux-item a.sf-button {
    margin-top: 34%;
}

3)

Yes, this would impact load time as everything is loaded twice on page load.

Thanks,
David.

[micheal_w]

Hi David,

1) I did this (see attachments) but the gaps are still there 🙁

2) works perfectly, thanks!

3), okay, good to know!

Attachments:

You must be logged in to view attached files.

[micheal_w]

This reply has been marked as private.

[micheal_w]

Can anyone reply to me please??
Thank you!

[David Martin – Support]

Hey,

Appologies, with each extra post you add it bumps your thread back to the end of the support list. If possible edit the last post you made and update it to avoid this.

Good news…

Within each Row, edit the text column: Add the class pb0 and set the PADDING - VERTICAL => 0.

I have done this here as a test for you: http://www.thepicnicstreet.com.au/tps-picnic-gold-coast/

Thanks,
David.

[micheal_w]

Hi David,

Ohh okay, I’ll edit it in the future if needed, thanks for the heads up.

Thank you for the solution for my issue, it works perfectly – but only on desktop. As soon as the site changes to table mode/size, between 766px – 960px, the padding issue still exists… Any solution for this please?

Thank you!

[David Martin – Support]

Hi,

What tablet size, I am testing iPad Portrait/Landscape and it looks good.

Thanks.

[micheal_w]

David,

Actually I was just testing it in Chrome/Mac by changing the size of the window…

[Swift Ideas – Ed]

Hi @micheal_w

The padding issues occur because the text areas are larger than the images when resized – the larger of the two will always determine the height of the row.

– Ed

[micheal_w]

Hi Ed,
I understand, thanks. Is there any chance to force the image to stay in its original place somehow and avoid from those nasty white spaces?

[David Martin – Support]

Hi,

You could make the text content smaller for different screen sizes, for example try adding this CSS and decrease the browser width:

This test is for this page only: http://www.thepicnicstreet.com.au/tps-picnic-gold-coast/

@media only screen and (max-width: 1024px) {
    
    .page-id-14692 .spb_text_column>.spb-asset-content h1 {
        font-size: 28px;
        line-height: 34px;
        margin-top: 0;
    }
    .page-id-14692 .spb_text_column>.spb-asset-content p {
        font-size: 12px;
        line-height: 22px;
    }
    
}

Thanks.