I am using Filepond version 4.7.3 and I know in version 4 they rolled out the ability to view items in grid view horizontally.
I have tried the following css:
.filepond--item {
width: calc(50% - .5em);
}
but i still see images vertically
Related
i have a question about image re-sizing.
is there any way to resize photos with css or php without cropping them?(woocommerce cropping feature is not the way) Also I have tons of photos already published in my website and to resize them one by one would be pain in the...
What should i do to fix this problem ?
example of what i got
https://i.imgur.com/8tKmbrA.png
tried
img {
width: 30%;
height: auto;
}
I have developed a Responsive website in Joomla 3 using the protostar template as default. Its a responsive page. I have created Main menus. I am trying to resize the Screen to 480 (mobile) the menus are not changing into Drop Down.
NAV-COLLAPSE DOESN'T HAPPEN. even though i have given # media.
If i Change the template to ISIS Template nav-collapse works.
my css:
#media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0,0,0);
}
when I am using LinkManager on an inserted image, a blue border starts coming around the images. Can some body help me to remove this border?
This is a default behavior of IE inside the editable iframe elements, which can be customized via the following CSS rule:
a img
{
border: none;
}
Put the class in a CSS file and load it through the CssFiles property of RadEditor. It will clear all borders shown for images inside an tag.
Best regards,
Rumen Jekov
Kendo ASP.NET-MVC
Our designer wants a grid that has no borders or frames and no alternating row backgrounds. Basically a white box without lines. It's for financial reports. plain and simple.
There should be a monocolored header and footer row where the column names and paging go.
Is this achievable? We don't want to edit too much the main CSS as the rest of the controls on the site should have borders and colors. It's just the grid.
Try:
.k-grid, .k-grid * {
background: white !important;
border: 0 !important;
}
This forces all background for k-grid to white removing gradients and background images and sets borders to 0px (no border).
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>