Modify Featured Slider WordPress
- SOLVED
Hi, I am trying to get a featured slider to behave like the one on this page.
http://www.adrotateplugin.com/
This page was written with the woo theme "definition". I purchased wooslider in hopes to get hte same functionality but it doesn't do it - it is however built on the same flexslider base. Another plugin I've tried built on flexslider is the "Arconix Flexslider" (free on wordpress) which is closer but doesn't resize correctly.
The functionality I'm looking for may all be css but I am not sure as any css changes I make don't recreate it.
What I need is that when the window resizes down (as in the above site)
- The content block moves below the image
- The image expands to fill the space.
- Both image and content boxes are centered in the container
Another feature that this does not have which I'm sure is purely css - is that when the window becomes very small - such as with an iphone - the content block should only show the title, not the excerpt to prevent the container from becoming too long.
I'm hoping this is only css or minimal changes to get a slider to wrap and center correctly for an attractive responsive layout.
Answers (4)
Duncan O'Neill answers:
Hi,
I think you only need to over-write, for smaller screen sizes, a css rule at line 3205 of your stylesheet at [[LINK href="http://www.adrotateplugin.com/wp-content/themes/definition/style.css"]]http://www.adrotateplugin.com/wp-content/themes/definition/style.css[[/LINK]]
That rule is;
#featured .flexslider .slide-media {
float: right;
width: 48%;
margin: 0;
}
To over-write this for smaller screen sizes, add at the bottom of that stylesheet this;
@media only screen and (max-width: 768px) {/* choose your own width here go for 979px to apply to under-1024px screens */
#featured .flexslider .slide-media {
width: 100%;
}
}
I've tested this only on Firefox.
Hope this helps.
Connie Taylor comments:
wooSlider is already responsive - the behavior I want to change is how the text content and the image wrap when the screen is resized. If you look at that site the text stays together and doesn't wrap around the image - it moves below the image and the images resizes and centers to fill the space.
Connie Taylor comments:
The Adrotatorplugin site is the slideshow I want but not the theme I am using
Duncan O'Neill comments:
For the staging site you quote above, you'd want to edit http://www.brandmagik.com/anginn/wp-content/plugins/arconix-flexslider/includes/flexslider.css
Try adding the following to the bottom of that file;
@media only screen and (max-width: 768px) {/* choose your own width here go for 979px to apply to under-1024px screens */
.flex-image-wrap {
width: 100%;
}
.flexslider .slides img {
width:100%;
}
.flex-content-wrap {
width:100%;
}
.flex-title {
text-align:left;
}
}
Connie Taylor comments:
I'm sorry I misunderstood your first post - this WORKED!!!!! woo hoo you are a genious
Connie
Kiet Luong answers:
Let's talk about your project.
Skype: kioluong
Gmail: [email protected]
Sincerely !
Arnav Joy answers:
can you show me your site?
Connie Taylor comments:
Sorry for the delay - gave the first responder a chance to look at it but he was unable to do anything. the site is in dev at http://www.brandmagik.com/anginn/
I do want to reload the slider plugin in case he made changes but this slideshow is what I want to change.
Christianto answers:
Hi,
So you use wooslider and want it to become responsive?
Assuming that html structure with its ID and class not change, please try below css,
you need to replace your slider wrapper ID/class with yours (I use <strong>.col-full</strong> like in wooslider demo),
and need to set it to fluid layout instead of fixed in certain screen size (in this case < 980px)
/*----------------------*/
body{
min-width: auto!important;
}
.col-full {
width: 980px;
}
/*----------------------*/
.wooslider{
position: relative;
}
.wooslider-control-paging li a.wooslider-active {
background: #fff;
cursor: default;
}
.wooslider.wooslider-type-slides img{
width: 100%;
height: auto;
}
body.single-product #page-heading.woo-slider .wooslider .wooslider-prev{
left: 0!important;
opacity: 0;
}
body.single-product #page-heading.woo-slider .wooslider:hover .wooslider-prev{
left: 10px!important;
opacity: 0.8;
}
body.single-product #page-heading.woo-slider .wooslider .wooslider-next{
right: 0px!important;
opacity: 0;
}
body.single-product #page-heading.woo-slider .wooslider:hover .wooslider-next{
right: 10px!important;
opacity: 0.8;
}
/*----------------------*/
@media only screen and (min-width: 768px) and (max-width: 979px) {
.col-full {
width: 100%;
}
.wooslider .slide-content {
width: 100%;
}
.wooslider .fl, .wooslider .fr{
width: 48%!important;
}
.wooslider .fl{
margin-left:2%;
}
.wooslider .fr{
margin-right:2%;
}
.wooslider .slide-media {
float: right;
width: 48%;
margin: 0;
}
.wooslider.full-width-slide .has-video .slide-media {
float: none;
width: 100%;
height: auto;
}
.wooslider .no-image.no-video .slide-content {
width: 100%;
}
.col-full {
max-width: 75.998em;
margin: 0 auto;
width: 100%!important;
}
}
@media only screen and (max-width: 768px) {
.col-full {
width: 100%;
}
.wooslider .slide-content {
float: none;
width: 100%;
margin:
}
.wooslider .fl, .wooslider .fr{
width: 80%!important;
margin: 0 10% 20px;
}
.wooslider .slide-media {
float: none;
width: 100%;
margin: 0;
}
.wooslider.full-width-slide .has-video .slide-media {
float: none;
width: 100%;
height: auto;
}
.wooslider .no-image.no-video .slide-content {
width: 100%;
}
.col-full {
width: 100%;
}
}
/*--- just decoration ----*/
@-webkit-keyframes spin-360 {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
zoom: 1;
}
50% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
zoom: 1;
}
to {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
zoom: 1;
}
}
Hope this help
Connie Taylor comments:
wooSlider is already responsive - the behavior I want to change is how the text content and the image wrap when the screen is resized. If you look at that site the text stays together and doesn't wrap around the image - it moves below the image and the images resizes and centers to fill the space.