Centering a Slideshow with CSS - css

I am not a coder by any means, I have very very little training and get by only with what I can pick up online. With that said, I apologize if this is a dumb question! I am a photographer who makes these slideshows for clients when their images are ready and I am having an issue getting them to center (horizontally) on whatever the page it is being displayed on. In my viewing galleries there are several different page widths, so even if I center manually using (i.e.: left 95px) or whatever it is for that page it obviously won't work on a different page with different site width. I am sure there is an easy universal command I can add to all of these slideshows that will make them center on every page but I can't figure it out -- any help would be greatly appreciated! Here is the code I am working with...
<style>
.ss-embed-container-89670 {
position:relative; padding-bottom:680px;
height:0; overflow:hidden; max-width:1020px} .ss-embed-container-89670
iframe {position:absolute; top:0;left:0; width:100%!important;
height:100%!important;
}
</style>
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

you could try to do something like this:
<div style="margin: 0 auto;">
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

Related

Embedded google form defaulting to center on mobile display

I have embedded a google form on my website here: https://gymefit.tw/groupclasssignup/
On the mobile view of this page in safari it seems to be defaulting to the center. I tried to fix it with CSS but have not had any luck
I've tried a bunch of stuff on css but am still a bit new so I think I am missing something here.
<div class="group">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSep0dl_-1LARR9R0ZVwrDz9Wy7rFI0cbxp6ckT6xAZFgLyLhQ/viewform?embedded=true" width="640" height="4303">
</iframe>
</div>
CSS:
.group iframe {
text-align:left !important;
}

How do I create space between youtube videos in my webpage? I am using bootstrap

I used below code.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Bpdpl4FjkjM?list=UU1H37OGfdt7JZzJJ4jS-bhA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i6wVUyol7W4?list=UU1H37OGfdt7JZzJJ4jS-bhA" frameborder="0" allowfullscreen></iframe>
</div>
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
I think you are using Bootstrap 3, so there is no built-in utility classes to add vertical spacing. You can add spaces using css:
.embed-responsive {
margin-bottom: 20px;
}
or only between embed video blocks only:
.embed-responsive + .embed-responsive {
margin-top: 20px;
}
.embed-responsive{
margin: 20px 0;
}

No proper solution for IE clickability over background image

I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)

Remove scroll-bar from iframe

I have a form from Google docs that I embedded in my website I want the students I coach to fill out but the scrollbar is annoying me. Any way to get rid of it?
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
use scrolling="no"
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" **scrolling="no"** height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
I'm not sure if it's the single scroll bar, or the double scroll bar that's annoying you...depending on the form you're embedding, some sections may be larger than others and they'll need to scroll to continue the form.
I'm very noob here, but fixed a naggy double scroll bar issue for a wix site using their html embed tool...
Taking the google form embedding code, I added the "style" sheet at the beginning and changed height and width to "100%" see here:
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<iframe src="YOUR SOURCE" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
I have found if you change the height of your form to say 2000 your form fits on your website without the scroll
e.g. width="650" height="2000"
You can try css: overflow-y: hidden;

The scrolling attribute on the iframe element is obsolete. Use CSS instead

I've embedded a Google map onto my website in an iframe:
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905" width="614" height="244" scrolling="no"></iframe>
This is invalid, and I need to somehow pull off the scrolling aspect in CSS. How would I do this?
<iframe style="overflow:hidden;"></iframe>
Late response
The only solution I found so far is setting overflow to hidden and set width, height to a parent div.
In your case:
<div style="width:614px; height:244px;">
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905"width="614" height="244" style="overflow:hidden; width:614px; height:244px;"></iframe>
</div>
I have found another solution which worked.
<iframe src="...." class="frame-abc" scrolling='no' ></iframe>
.frame-abc {
border:none;
overflow:hidden;
margin:0;
height:230px;
width:570px;
}

Resources