I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
Related
Recently I created an hybrid application developped with Ionic 3. I noted a little problem: sometimes a little square appears when open the side menu and close the side menu dots are visibe.initially not show any little square.
Steps to reproduce:
add Below css in app:
scroll-content{
overflow-y: auto; }
.scroll-content{ overflow-y: auto !important; }
.content .scroll-content {
overflow-y: auto; }
Above solution are not working for me please tell me how to fix this issue?
Check below image
I'm a novice to coding and square space and was wondering if something like this was possible on square space: https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/
My company wants me to find a way to have the first image be clickable and bring up another image (depending where you click) to show the availability of the one place you clicked. Then, we also want the second image, when clicked, to bring up the third one.
Is this even possible in squarespace? If so, how do I do this?
To answer your first question directly, yes it is possible either via a Code Block or via Code Injection. Essentially, you would be adding entirely new, custom code to your Squarespace website.
To answer your second question generally, it would be an entirely custom implementation -- that is, there is no block nor build-in feature in Squarespace that will help facilitate this functionality. Therefore "how you do it" would boil down to a good amount of custom code development (again, said generally).
To offer additional perspective: Consider that, on mobile, screen real-estate is more limited (and clickable-areas may become prohibitively small) and that overlaying interactive elements may require additional testing to ensure intended behavior across different mobile devices, operating systems, operating system versions and browsers. Considering these things ahead of time (or perhaps testing during the process) may lead you to reconsider the interactions and UI behavior overall (that is, to get away from multiple overlaying images and to a more vertically-friendly set of behaviors and interactions, just as one possible example).
In the old days we used image-map. It still works. With image-map you can draw a polygon which is a clickable link to another page (or trigger some javascript).
If you want it to scale nicely (in a responsive design) you would need some kind of plugin.
In it's simplest form the links would take the user to another page with another image-map or some other navigation pattern. Example
I guess it would be possible to do this in some custom code block in Squarespace, and just link to several other pages with images/image-maps or galleries.
There are tools out there that can help you draw the polygons (search for "image map generator") if you don't have Dreamweaver or similar.
Other methods:
If you want it to scale without some plugin, you can use SVG instead of image-map. If you are ok with only rectangular hotspots, you can also try this site which uses CSS to replace image-map.
Here is an example using html and css only:
html, div, p, a {
font-family: arial;
}
.map-image {
display: inline-block;
position: relative;
overflow: hidden;
padding: 0;
}
.map-image img {
width: 100%;
height: auto;
display:block;
}
.map-image a {
text-decoration: none;
padding: 5px;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 4vw;
}
.map-image a:hover {
border: 1px solid #FFF;
margin: -1px;
}
<div class="map-image">
<img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
Google
Facebook
Linkedin
</div>
(If you are a novice to coding, popup is probably not the right search term in this case. It is easier to link to other pages than to make everything "pop" on the same page.)
My problem is that images on my page (iutm.pl) are displaying properly for instance in Firefox (then I assume there is nothing wrong with my code), but on WebKit or Blink browsers (such as Chrome or Opera) they doesn't.
Maybe it is Paperclip fault which I use to store images (there is need to keep relation between database and images) cause images stored explicitly in assets display properly.
Anyway, i have no idea why everything works in Gecko, but not with other engines.
Thanks in advance.
Bootstrap overrides width and height of your images. The simplest solution is to add width and height attributes to existing styles where you define border for images. This code does the trick.
.event_frame .frame-top .frame-img img {
width: 200px;
height: 200px;
border: solid;
border-color: #b2b2b2;
border-width: 1px;
}
First and for most I would like to say "Hello" to the community. I'm an entry level junior web designer fresh out of vocational school. Most of my styling in CSS I've taught myself so this has led me to some problems. Such as the one below.
This is a sample of my navigation bar that I'm using for my site. Each of the div boxes are supposed to slide out to their corresponding positions over 2 seconds. However with every browser aside from chrome they snap out quickly instead of a smooth transition.
http://jsfiddle.net/kwh71787/cxBxL/
If anyone has any insight please help
Try using this style instead:
#navbuttons div {
position: absolute;
left: 0px;
}
DEMO
Welcome to Stack Overflow!
This seems to fix it. What I've done is I've added top: 0px; and left: 0px; to each div.
Here's an updated jsfiddle
Hope that helps!
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.