Joomla Templates Club 406,261 posts

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#1085931

Hi Guys,

I have the following code in a joomla article but for some reason the result sees the frame aligned to the right of the page. I found this solution <iframe align="middle"> but not sure where to insert it. Have tried a few different places but can’t get it to work.

@media screen and (max-width:675px){
#iframe{
min-height:1388px;
overflow-y: scroll;
}
}

<iframe id="iframe" src="https://www.xxxxx" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;">

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085942

Hi
You can insert the CSS code in a custom.css file and the iframe code in the article editor source code where you want to add the iframe on your site.
if any issue shares the URL of the page with me, I will have a look at it.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#1085945

Hi Pankaj,

Sorry you mean put the <iframe align="middle"> in the custom.css file?

The page url is http://www.theplatinumlist.com/join

Jim

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085951

Hi
Add below code in custom.css file

#page-wrapper {
     max-width: 900px;
   margin: 0 auto;
}

change the width as per needs.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#1085954

Thanks but it is still aligned to the right.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085957

Hi
Apply the style in iframe code you added in the page wrapper class as its in iframe
http://prntscr.com/hycg1n

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#1085958

Like this?

page-wrapper {

 max-width: 900px;

margin: 0 auto; style="width:100%; height:734px;border:none;overflow:hidden;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085972

Hi
The style is coming from an external website that you added in the iframe which can not be changed.
You can use this code in iframe

<iframe id="iframe" src="https://apply.cardskipper.se/if4" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;margin: 0 auto;max-width: 900px;"></iframe>

use this code as iframe and change max-width value.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#1085977

Thanks Pankaj that has worked a treat on the computer. Now I need to figure out how to change it on the responsive screen of a mobile device. Will do some research online. Many thanks for all your input and guidance.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1085990

Hi
To apply different style code for the different screen sizes you need to define style classes in the iframe and then apply the style i suggested via style classes.
here is documentation for how to use media queries on style code.

Regards

[Author]

Posts