I'm having some issues trying to make an overflowed container I've created in Divi draggable.
After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.
I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.
Example of what I'm trying to achieve
https://codepen.io/toddwebdev/pen/yExKoj
Development website
https://snapstaging.co.uk/thesnapagency/about/
Container layout
<div class="section">
<div class="row">
<div class="column">
<div class="module">
<div class="container">
<div class="items">
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Should be fine if you changed the styling a bit.
give the container (div with draggable on your webpage )
overflow-x: auto;
width: 100%;
and set the width of it's child (row)
width: 2500px;
Then whenever you use that codepen you should be good.
<div class="et_pb_row et_pb_row_7 draggable" style="
overflow-x: auto;
width: 100%;
">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style="
width: 2500px;
">
Items here
</div>
</div>
Related
Im trying and trying too build something i think simple but right know i dont know how to do it ;) Honestly i mad it few months ago but i lost files and i don have any idea how to build it right now
So, im using Bootstrap to build gallery i have 2 different sizes of images long and short ones
Long ones are 1920x1200, short 1200x1200px
im trying to build it in grid like
<div class="row">
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
</div>
Of course it should look like in my preview img
and of course img should be in the center of each column.
I tried to use JS for match heigh and it works fine but of course image is out of the parent div and i cant fix it. I cant use background-image beacuse JS is not reading the size of div.
Any ideas ? How to build it ? The best thing is that i build it ...... and right now i can build it again !
Thank you very very much !
If you want the image to match the containing div's size you should add this code to the CSS:
img {
max-width: 100%;
max-height: 100%;
}
you can also save the original ratio by using this instead:
img {
max-width: 100%;
height: auto;
}
First of all, the structure of the html is wrong,
each row has 12 columns, you have put all the columns of each row into one row.
The code should be like this:
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-6">
<img>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
Like this, the images should be organized more or less as you want
I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.
With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}
This code is a part of the website which i am making and this section keeps overlapping images. How do I correct this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Image of the same:
Because you set image to be always 180x180 if the width will be lower than 540 (+some margins) they will overlap. You can disable it by setting overflow: hidden; on each column. But in your case this should not appear as you are using md columns.
So I think your problem is that you have too much columns. There should be next row each time you exceed row column limit in bootstrap default is 12.
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Make sure your css of the images is position: static;
If you want them in-line with one and other, add: display: inline-block; or if you want it just downwards: display: block;
Refer to positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I have a link to my div mySkills, and when I access my page I have the bars loaded, but I just want to load my progress bars when i click in my href to this div mySkills.
How can we do that?
<nav id="menu">
<ul>
<li >About</li>
<li>Skills</li>
<li >Contact</li>
</ul>
</nav>
<div class="mySkills">
<h1>John <span>Skills</span></h1>
<div class="skill">
<h6>HTML</h6>
<div class="progress_bar orange">
<div style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<h6>CSS</h6>
<div class="progress_bar teal">
<div style="width: 67%;"></div>
</div>
</div>
<div class="skill">
<h6>Photoshop</h6>
<div class="progress_bar blue">
<div style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<h6>PHP</h6>
<div class="progress_bar green">
<div style="width: 55%;"></div>
</div>
</div>
<div class="skill">
<h6>Javascript</h6>
<div class="progress_bar yellow">
<div style="width: 55%;"></div>
</div>
</div>
</div>
Here is a possible approach to your request:
http://jsfiddle.net/pHyz9/
HTML added:
<button id="update">Update Values</button>
CSS:
.skill {
display: none;
}
.progress_bar div {
transition: width 1s;
}
Javascript (jQuery):
$("#update").on("click", function(){
$(".skill").fadeIn(800);
$(".orange div").css("width", "75%");
$(".teal div").css("width", "67%");
$(".blue div").css("width", "80%");
$(".green div").css("width", "55%");
$(".yellow div").css("width", "55%");
});
It uses CSS3, it is a bit incomplete, and the code could be prettier, but this is only an example to show what can be done with such a simple code.
So you should take following steps in order to achieve your goal.
Steps:
1. Make your <div class="mySkills"> hidden using css.
div.mySkills
{
display:none;
}
2. And on Skills
$('a[href="#mySkills"]').click(function(e){
e.preventDefault;
e.stopPropagation;
$('div.mySkills').toggle();
});
More about .toggle() you can read from here.
P.S.: If I understand correctly your question and answer in properly replay with comments. I will correct it.
If you want to see working example open following link.
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam