I created 3 images. Each image size is 1300 x 600.

I created content type SLIDESHOW.

I added 3 contents to the SLIDESHOW.

I created a views slideshows.

enter image description here

I applied my css as below:

 .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide {
    width: 100% !important; 

.view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img {    
width: 100% !important;

I placed the slideshow block in a region. When I visit my page, width is always 100% width which takes the full width of the screen as expected but the height is not being responsive until I press refresh. It means when I visit the page in laptop/desktop, page loads fine. If I try to make the screen smaller or larger, width is 100% of screen but the height is not being responsive until I hit refresh. How can I fix the issue?


Use Flexslider .It is fully responsive slider. https://www.drupal.org/project/flexslider

  • Can I create a block with flex slider? Also, is there way I can fix the current issue that I am having with the views slideshows? – learn4ever Oct 20 '16 at 16:49
  • Yes you can create a view block. – Pankaj Yogi Oct 21 '16 at 5:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.