IFRAME position

Support
#1

Hey gang. A little stuck.

The iframe needs to be full page, and mobile responsive, and I am drawing a complete blank.

HELP PLEASE

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

#omega_watches {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto !important;
	width: 100% !important;
}
#omega_watches iframe { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Hope it helps :slight_smile:

#3

it worked for the page, but destroyed my header, so I am restoring from the last backup.

#4

Hi There,

Is there anything on your embed code (<iframe>) that says width: 800px;? If yes, please change that to width: 99%; else please add this to Theme Options > CSS

#omega_watches {
	width: 99% !important;
}

Clear your caching plugins after doing the changes.

Cheers!

#5

I followed your instructions, but now the frame isnt loading. Here is what Omega sent:

  1. Place the following script tag in the tag of your website
  1. Then place this div tag where you want the module to be brought in
#6

Hi There,

Please try placing in a raw code element.

<div> YOUR JS CODE HERE </div>

If that does not work please provide your login credentials in a secure note so we can take a closer look.

Thanks

#7

I did, and it’s loading, but now we have a gap on the right and nothing on the left

Also, its 1/3 of the screen on mobile:

#8

Hi,

To remove gap, change width in your css to 100%

eg. Change this

#omega_watches {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto !important;
    width: 99% !important;
}

#omega_watches iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 100%;
}

to

#omega_watches {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto !important;
    width: 100% !important;
}

#omega_watches iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#9

thanks. what about mobile?

#10

Hi there,

Please clear your mobile browser cache, I checked and there is no gap in mobile too.

Thanks!

#11

Hi, Rad. I wasnt referring to any gap on mobile. its the screen size. please look at the attached screenshot above

#12

Hi There,

Actually, that page looks better on mobile, please clarify the issue, and try clearing your browser’s cache and caching plugins.


Thanks,

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.