Image full width half page

[Sophie18122008]

Awesome it is working concerning the video!

Thanks a lot!

Now Concerning the image associated to our website when we share it on social media. I checked out with Yoast SEO but sadly you need to have a premium account to have access to these features. Do you know a free plug in? Or is it not possible to add some CSS code to personalize the image showing up? How your customers does that generally?

And regarding our clients logos on the mobile version, I added the CSS code you provided me:

@media only screen and (max-width: 767px) {
.spb_content_element.spb_single_image.sf-animation.noframe.col-sm-2.sf-animate {
max-width: 33.33%;
clear: none;
float: left;
}
}

But it is still displaying only one logo per line on the mobile version instead of 3 lines of 3 logos :/ Could you check it out for me please?

Thanks a lot for your help,

[David Martin – Support]

1) You will not need the paid version. Install YOAST and set your featured images for posts. The rest will be automatic.

2) On my mobile emulator for iPhone 6 I see the client logos correctly, what device/orientation are you viewing this on. If you could supply any screenshots that will help also.

[Sophie18122008]

2) I have checked on Iphone 4, 5 and 6. See in the enclosed picture which is an Iphone 6. It is not display correctly. Thanks for your help.

Attachments:

You must be logged in to view attached files.

[Sophie18122008]

1) I made the change and it works for Facebook but there is no option for LinkedIn where it is not still displaying the featured image when I share the link of my website, neither the description. Do you know how I could do? Thanks for your help

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

The meta property is set correctly in the source code – can you create a test page with the social image added, and try sharing that to see if the image shows? My thoughts are that maybe linkedin has the URL cached without the image.

– Ed

[Sophie18122008]

1) Okay I am going to check it out with LinkedIn then.

2) Did you check out for this problem? I sent you two screenshot to explain the situation on JULY 10, 2017 AT 10:01 PM. Thanks for your help.

[Swift Ideas – Ed]

2) What size is the image you’ve uploaded? It needs to be at least 600px wide for retina displays.

– Ed

[Sophie18122008]

They are 300 × 150 but they looks good on retina screen as well, they are clear.

The problem is that it is still displaying only one logo per line on the mobile version instead of 3 lines of 3 logos, they should be smaller to be displaying on 3 lines as the screenshot David Martin have sent me on JULY 4, 2017 AT 1:34 PM (I would like that). But even with the css code added, it still not working on any kind of phone (iphones and others).

Here is the Css code provided by your team to help me solve the problem but that does not work:

@media only screen and (max-width: 767px) {
.spb_content_element.spb_single_image.sf-animation.noframe.col-sm-2.sf-animate {
max-width: 33.33%;
clear: none;
float: left;
}
}

And the image enclosed is how the logo are set up in the CMS.

So are you sure that changing the size of each logo for 600×600 will really fix the problem?

Thanks for your time.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Please change that CSS to this, and that will resolve it:

@media only screen and (max-width: 767px) {
.spb_content_element.spb_single_image.col-sm-2 {
max-width: 33.33%;
clear: none;
float: left;
}
}

Apologies for the confusion!

Ed

[Sophie18122008]

Amazing! It is working perfectly! Thank you so much for your support! It looks much better 🙂

What CSS code I would have to add in order to have the 4 elements including counter down (cf screenshot) on 2 lines of 2 elements? Latest technical question I have on this website :-).

Thanks a lot for your support!

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Happy to help!

You’d adjust those in the page builder, to be 1/2 columns rather than 1/4.

Thanks,

Ed

[Sophie18122008]

Hello Ed,

Thank you so much for your support. Unfortunately I have set it up two 1/2 column in the page builder (cf. screenshot), but when I check on a phone, it is still displaying one counter per line (so 4 lines) instead of 2 counters on 2 lines.

Thanks for your advice

[Swift Ideas – Ed]

Sorry for the delay – can you confirm the link this is on? We’ll take a look and provide some CSS to adjust that for you.

Thanks,

Ed

[Sophie18122008]

It is http://www.approachpeoplecareers.com. I gave the login details earlier several time in this ticket if you need them 😉

Thanks a lot for your help,

[Swift Ideas – Ed]

Give the full width text element an extra class of ‘home-blocks’, and then add this CSS:

@media only screen and (max-width: 767px) {
.home-blocks .one_half {
    width: 50%;
    float: left;
}
}

Thanks,

Ed