Wordpress responsive portfolio grid issue - html

I have been having problems with a Wordpress theme where the portfolio grid doesn't seem to be spanning 100% across the page.
You can find the problem here after the 'crashes' image box - http://beta.audiopeak.net
Any help with amending this issue would be great.

I made these changes to the CSS (screen.css) and it seemed to work (but with limited testing).
Let me know if they work for you.
.one_fourth.gallery4:hover div.thumb_content {
opacity: 1;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
.one_fourth.gallery4 img{
width: 100%;
}
.page_content_wrapper.full_width {
width: 102%;
}

Related

Sliding, hiding, and navigating through divs without javascript

I am attempting to make a type of interactive slideshow for my website and running into some dead stops in its development. Any direction or assistance on it would be great. The problem I am having is making it responsive.
Here is what im going for: http://adobe.ly/1sRBMLv
I was able to create this initially by using overflow:hidden; on a 4000px wide div within a 800px wide visible section. The links then just repositioned the div to show 1 of 5 different 800px wide sections. This idea ultimately needed to be scrapped as it's not responsive.
Here is my jsfiddle: https://jsfiddle.net/dodgrdg3/1/
So far I have just the basic html and css structure but not the function. Any help would be amazing.
I found the solution with the help of #Serlite pointing me in the right direction. I am treating this as a slideshow now. Here is the Fiddle for it working:
Working Example
One of my changes were changing.....
This:
#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }
Became:
#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }

(CSS) skew img frame without distorting image

I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.

Blur & Flicker issue on CSS transform

I found quite a few questions here with solutions too, but none seem to work for me. After the scale up, the text is blurry and then it flickers into position. Something wrong with the rendering.
I made a fiddle with the exact structure I'm trying to use, if someone has a solution for it, I'd appreciate it.
I want to underline that I've tried the solutions I found here, but none helped, or I haven't been able implement them as intended.
FIDDLE: https://jsfiddle.net/1yu9p66L/1/
.box1:hover {
-moz-backface-visibility: hidden;
-moz-transform: translateZ(0) scale(1.0, 1.0);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.09);
-moz-perspective: 1000;
-moz-backface-visibility: hidden;
}
PS: Currently testing on FF 45.0.1.
Add transform to the original box that scales it to < 1 and then change the transform in hover state to 1. You'll need to adjust the sizes of the box.
This to .box1, for example:
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
and this to .box1:hover
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
https://jsfiddle.net/1yu9p66L/2/

Safari CSS Transition flickering

I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared

Making checkbox bigger in size

I'm trying to make the checkbox bigger in size. The regular size is too small
Try CSS 'transform'
input[type=checkbox] {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2); }
But it will not work on IE8.
http://www.w3schools.com/cssref/css3_pr_transform.asp
You can make use of the images to change the style of checkboxes.
You can also use the following CSS which has been tested in Chrome. But this won't work in Firefox:
input[type='checkbox'] {
width: 4em;
height: 4em;
}
For a demo visit: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
This is tough to achieve if you want to maintain cross-browser compatiblity.
You may want to consider an input replacement plugin such as this one.
http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/