I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:
This is how it is # 1280x800:
<div class="row" id="timer-wrap" style="margin-top: 50px;">
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/days.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/hours.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/minutes.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/seconds.png" width="147px" height="136px" />
</div>
</div>
<img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>
And this is the CSS:
#left_arrow, #right_arrow{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
#left_arrow {
left: 0;
}
#right_arrow {
right: 0;
}
#timer-wrap {
position: relative;
}
#timer img {
padding: 10px;
min-width: 121px;
max-width: 100%;
}
But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.
The edited fiddle is this one.
Okay, first, we should nest the .col-s directly under the .row:
<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="row"><!-- added this `div` -->
...
Then we need to fix the columnizing. I'm assuming you want them centered in the page and each at most 1/4 of the screen (so they can all four fit in a row). So we want each to span as many as 3 of Bootstrap's columns, i.e. .col-xs-3. We also need to remove the height and width attributes from the img tags, as they're trumping your max-width: 100% right now. So the adjusted columns are like this:
<div class="col-xs-3">
<img src="img/timer/days.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/hours.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/minutes.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/seconds.png" />
</div>
Since Bootstrap's grid is mobile-first, the larger screens will inherit the 3-column size unless you override them.
But then the images overlap the arrow images. So to rectify that, we're going to limit #timer's width and center it within #timer-wrap, like so:
#timer {
width: 80%; /* or whatever works */
margin: 0 auto;
}
Now, at the moment, these images are getting super small. Bootstrap's grid already has gutter padding, so you may want to remove the padding: 10px; that you have on #timer img at the moment.
Messing with the width of the #timer should help you get the look you want. You may want to adjust the layout for really really narrow screens, too.
Let me know what else you need and I'll keep the answer updated.
Related
I have the below code:
https://codepen.io/nht910/pen/qBBOwyN
Snippet:
<div class="post-body d-flex">
<!-- content -->
<div class="post-content">
<p>...</p>
</div>
<!-- button toggle -->
<button type="button" class="btn sticky1 border-white outline-none" style="box-shadow:none;" id="toc-button">
<img src="https://i.imgur.com/NuY1GRF.png" width="25px" height="100px">
</button>
<!-- table of contents -->
<div class="post-toc">
<div class="d-block sticky-top mb-5">
<div>
<button type="button" class=" sticky-top btn outline-none" style="box-shadow:none" id="toc-button-2">
<img src="https://i.imgur.com/s1ej0s3.png" height="20px" >
</button>
</div>
<div>
<nav class="" id="toc"></nav>
</div>
</div>
</div>
</div>
My problem is that I can't make toggle button become sticky with out changing the layout. I tried to change its position to sticky but the layout will change a little bit.
So I think best way is use a Jquery script to make it become sticky. In codepen, if you click on TOC button, it will expand a table of contents, and this table of contents has perfect sticky animation that I want.
Can you please help me to make a script to make my TOC button become sticky in it's father div .post-body?
Thank you guys so much.
Make it sticky, then make absolute positioned wrapper with desired placement and height 100%: https://codepen.io/f278f1b2/pen/vYYNwpz?editors=1100#anon-signup
#toc-button {
width: fit-content;
height: 110px;
position: sticky;
/*margin-top: 30px;*/
top: 0;
margin-bottom: 130px;
}
.toc-wrapper {
right: 0;
top: 15px;
position: absolute;
height: 100%;
}
I have an issue with fancybox3. If you have a bigger content width, e.g. 2500px, the display of the box proceeds not as normal. To see this fancybox you will have to scroll down.
Here is my code:
<div style="height: 800px;">
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancyBox width 500px;
</a>
<br>
<a data-fancybox data-src="#hidden-content2" href="javascript:;">
Trigger the fancyBox width 2500px;
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<div style="width: 500px;">
... some stuff ...
</div>
</div>
<div style="display: none;" id="hidden-content2">
<h2>Hello</h2>
<div style="width: 2500px;">
... some more stuff ...
</div>
</div>
I've a codepen for this issue. Any ideas?
https://codepen.io/anon/pen/EQmgjK
fancyBox uses inline-block trick for vertical and horizontal centering. This is the best option for centering in the unknown, but unfortunately there are some drawbacks. By forcing extra wide content, you are breaking it.
You have several options, for example:
Make content scrollable:
#hidden-content2 {
max-width: calc(100% - 80px);
overflow: auto;
}
https://codepen.io/anon/pen/vdmyRo
Hide pseudo element
.fancybox-slide.wide:before {
display: none;
}
(You can set custom class name by setting data-slide-class="wide" attribute)
https://codepen.io/anon/pen/vdmydo?editors=1100
Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.
Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.
I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.
jsFiddle (with slightly modified values so it appears correctly).
I am trying to move the position of some divs on my page.
div.note {float:left;width:666px; padding:0 0 0 50px;}
div.first_note {margin-left: 565px;}
The divs are horizontally displayed, with 50px between each one.
<div id="note-1" class="note first_note">
note display here
</div>
<div id="note-2" class="note">
note display here
</div>
<div id="note-3" class="note">
note display here
</div>
This is the moving code:
$('.note').animate({"left": "+=500px"}, "slow");
When this is run, the notes don't move at all, but the HTML changes to this:
<div id="note-1" class="note first_note" style="left: 500px;">
note display here
</div>
<div id="note-2" class="note" style="left: 500px;">
note display here
</div>
<div id="note-3" class="note" style="left: 500px;">
note display here
</div>
What am I doing wrong?
you need to position it relative.
div.note {
float:left;width:60px;
padding:0 0 0 50px;
position: relative;
}
demo
edited your fiddle: http://jsfiddle.net/PsQBD/1/
it should be
margin-left: +=500
without the px.