i am using a template from AMP Start.
i have used the amp-carousel.
the arrow images for next image and previous image buttons are on top of the screen and are not visible.
how can i fix this?
image one
image two
Do following things :
.amp-carousel-button .amp-carousel-button-prev {
position: absolute;
top: 50%;
left: 0;
}
.amp-carousel-button .amp-carousel-button-next {
position: absolute;
top: 50%;
right: 0;
}
or else replace default indicators to custom indicators using following link :
https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md
To dont let hide arrows try to add type=slides in amp-carousel
Related
How do you make the position: absolute; position: relative; stay together but have an auto height
I am trying to make profile cards in the style of Discord (latest design). When trying to show both the banner and a banner color it isn't aligned correctly. If anyone could help me, please?
Screenshot 1
Screenshot 2
To debug I tried to use CSS data selectors (\[data-??='true'\])
.preview-card.pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
Yesm this will work but not for everything.
I think you have a space missing. Try this maybe:
.preview-card .pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
I am using Bootstrap template SB Admin (https://startbootstrap.com/templates/sb-admin/) which has a hide/show side nav using a menu button on click. I want to retain the standard functionality on full screen which defaults to show the side nav unless specifically clicked to close.
On smaller screens/mobile the default behaviour is to hide the side nav unless clicked to open, which is fine however I want the nav to auto-close when clicking outside of the nav div - but only on mobile.
I can't work out how to trigger different behaviour based on breakpoints - any ideas would be greatly appreciated. Thanks.
Are you using the dist files or src files?
If you are using the dist files you can simply add this to your css, no extra jquery or js required.
#media (max-width: 992px) {
.sb-sidenav-toggled #sidebarToggle::before {
content: '';
position: fixed;
display: block;
z-index: 0;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
What this does is when the side nav is set to open, there is a class added to the body tag. .sb-sidenav-toggled.
We are also wrapping this using a css media query to make sure we are only on tablets/mobiles (991px below).
Then on the #sidebarToggle button (when open using this parent body class .sb-sidenav-toggled) is creating a fixed pseudo ::before element (which is transparent) which covers the body area you want to be clickable to close side nav.
The magic is, because this pseudo element parent is the sidebar nav button, it means when it is clicked it triggers the standard close side nav event. And when it closes, the .sb-sidenav-toggled body class is removed, in turn removing the pseudo element.
If you are using scss files in the src folder, then you can use the sass below...
#include media-breakpoint-down(md) {
#sidebarToggle {
.sb-sidenav-toggled & {
&:before {
content: '';
position: fixed;
z-index: 0;
display: block;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
}
}
So the problem is as the title states... I have a small drop-down that when shown, hides itself under the scrollbar...
CSS for the dropdown:
.dropdown-content {
#extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
max-height: 650px;
overflow-y: auto;
opacity: 0;
position: absolute;
z-index: 999;
will-change: width, height;
}
Also here is the .js code from Materialize framework in case anyone thinks that there is something that can be done in the .js:
// Position dropdown
activates.css({
position: 'absolute',
top: origin.position().top + verticalOffset + scrollOffset,
left: leftPosition
});
I have tried changin the overflow in the css but nothing happens...
So doeas anyone have any idea how to resolve this issue or is there a way to overlay the scrollbar??
NOTE: Im using Materialize framework and Meteor
EDIT Is is possible to write a function in javasacript that would calculate the position of the click event and display the dropdown where the click event happened?
I would like to add actions to this image
So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?
there should be a onhover method for javascript on the html dom.
<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>
So, you have a problem with the divs?
function doHover(id, bool) {
var obj = document.getElementById("hoverPoint"+id);
if(bool) {
obj.style.backgroundColor="green";
}else {
obj.style.backgroundColor="blue";
}
}
.hoverPoint {
position:absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
display:block;
background-color: blue;
opacity: .6;
}
#hoverPoint1 {
top: 130px;
left: 135px;
}
<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" />
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>
I solved the problem by deleting red dots in photoshop and then adding them using pure html (I made buttons with background image of red dots) then I placed this dots randomly on the roadmap
OK, so here's what I'm trying to do (rather a lot more complicated than what you'd guess from the title...) :
My (test) page is : http://83.212.101.132/betdk/home/two
I have integrated this Bootstrap snippet : http://bootsnipp.com/snippets/featured/login-form-with-css-3d-transforms
As you can see, there's the login form on the right side. When you click that gray-ish little triangle at the top right (or left) corner, the form flips.
Now, the thing is :
How can I set some content (centered - e.g. a little icon) INSIDE this gray triangle? (instead of that awkward "sign in -->" thing...)
Tried using content: or something along these lines, but since I'm not such a ... CSS guru, I haven't managed anything.
So,... any ideas?
You can set some content with the :after pseudo-element:
#triangle-topright:after {
content: "A";
position: absolute;
right: 0;
top: 0;
text-indent: 0;
}
#triangle-topleft:after {
content: "B";
position: absolute;
left: 0;
top: -50px;
text-indent: 0;
}
Then you could use an icon font to put an icon in there.