Center you tube media and raw contend

[RPronk]

Hello, I am building a landing page with several sections and rows. I have some you tube media and other raw content (facebook reviews) I cannot get them to align center. The video and reviews are in the middle and almost end of the page

https://www.jitty.nl/gratis-uitgebreid-advies-gesprek/

Any help greatly appreciated

[tristup]

Hi @RPronk,

Thanks for reaching out.
You need to set the margin value to 0 and auto for the video element to make the video in the center. Regarding the review section, iframe width should be static like 552px to apply the margin 0 and auto. By going ahead I have created 3 different columns for these three ** reviews**, added the class review-class to the column, and the following code into Content CSS to make the section center aligned.

.review-class iframe 
{
    width: 552px;
}

I have also set the video margin to 0 and auto to set that align center. Please let us know if you have any further issues.

Thanks

[RPronk]

THANKS!!!
Only thing left, the tube player is very small on mobile, I would like to almost or completely be the width of the mobile screen.
Thanks for you help in this!
Cheers
Ronald

[tristup]

Hi Ronald,

To make the video bigger, you need to increase the width in the smaller screen devices, you can add the following custom CSS code into Theme Options > CSS to achieve that.

@media  (max-width: 768px) 
{
    .x-frame 
    {    
        width:100% !important
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[RPronk]

Thanks it worked! But I had to change some things the page is still in construction. One more issue, I have a row with has a headline " Onze klanten zijn onze topmodellen" you will see three global blocks of three picture. I need to remove the gaps between the columns. Thanks so much for your help

[nabeel]

Hey @RPronk,

To remove the gaps between the columns, Inspect your Global Blocks Sections, go to the Row settings and turn Off the Global Container (see screenshot)

Let us know how this goes!

[RPronk]

Yes it does, I kind of get it also. Thanks!!!

[RPronk]

Another small issue. I have two pictures on this page which are a bit wider then a mobile screen will fit. I do not mind it will be cut off on mobile screen, design wise I need them on the desktop version. The only issue is on mobile on the left side the picture is cut off, on the right side not. Can I give this picture a CSS or setting that I will align left so it will full width on mobile? I do not mind that the picture will be cut off so it does not need to fit the full width, I just like to get rid of the white space on the left.
Thanks!!!

[tristup]

Hi @RPronk,

I have tested your site and didn’t find the issue you marked in the screenshot. It’s worked perfectly in the smaller screen devices. If you are still getting this issue in the browser or any specific device, please mentioned that. It will help us to replicate the issue at our end.

Thanks

[RPronk]

Hello Tristup,
it is not an issue. This is how it is made, I cannot change it. The screenshot is the layout shown in the PRO builder with the mobile phone selected. Of coarse the text should not be all left. The column has a gap on the left which is fine for the text, but I like the photo to “overlap” the column.
I edit the screen shot in Photoshop, this is what I would like to achieve . Please compare with the other screen shot and look to the left side of the picture
Thank you!

[tristup]

Hi @RPronk,

While checking in the browser, the issue is not visible. If that is only visible in the builder, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

NOTE: The Admin Login URL provided in the previous post is not accessible.

Thanks

[RPronk]

Hello, herby two screenshots with my iPhone

[tristup]

Hi @RPronk,

I have duplicated the image and make that image width 100%, and also make that image visible only on the mobile devices, whereas making the other image invisible in mobile device from customize tab of the image element.

If you find any similar issues on other pages, I would recommend you follow the process explained above. Please let us know if you have any further issues with it.

Thanks