Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Adding a stripe of pictures

image galleryresponsive gallerystripe
    • 10 years ago lapizd
      Participant

      Expired

      How can I have a stripe of photos like the one you have to display the portfolio images on the default demo? However the images I want to add are not part of my porfolio, but just an image gallery with some pics from my office. I would like it to be responsive like the portfolio gallery is.

      Also, I am wondering, what would be the size(widthxheight) for these images If I want to have 3.

      Thank you!

    • 10 years ago Mirela
      Participant

      Hello,

      You can use the ‘Media’ element. Set the row in three columns and add a “media’ image for each. Since it is a Visual Composer element, it is responsive too.

      Best regards!

    • 10 years ago lapizd
      Participant

      Expired

      I tried the media element, but it did not work…..I need to add 3 different images that will go all together in a horizontal stripe.   The media element only allows for 1.

      Any other way of accomplishing this?

    • 10 years ago Mirela
      Participant

      Hello,

      Yes, the ‘Media’ element only allows one image. But as i previously said, you have to set the row in three columns (screenshot). Add a media for each column.

      Best regards!

    • 10 years ago lapizd
      Participant

      Expired

      I tried it and I cannot get the images to work the way I want. I tried changing the settings of the row, but none of the options really work.

       

      What I am trying to do is that is in here https://lapizd.com/2015_site/?page_id=85&preview=true&preview_id=85&preview_nonce=b7b7a455e4

       

      Thank you so much for your help :)

    • 10 years ago Mirela
      Participant

      Hello,

      I can not see the image you send. It says: You do not have permission to preview drafts.

      Best regards!

    • 10 years ago lapizd
      Participant

      Expired

      Sorry about that. Try this https://trendyluv.com/images/stripe.jpg for the sample and I will send a separate message with my site credentials

       

       

    • 10 years ago lapizd
      Participant

      Expired

      This reply has been marked as private.
    • 10 years ago lapizd
      Participant

      Expired

      This reply has been marked as private.
    • 10 years ago Mirela
      Participant

      Hello,

      You can use the ‘Media Grid’ element of Visual Composer to achieve this. I made an example in your site (test page). As a Visual Composer element, it is also responsive.

      Best regards!

    • 10 years ago lapizd
      Participant

      Expired

      Thank you so much! I see the sample, however is not quite what I need. I want the images to be together like you did…but I want them to extend to the full with of the browser like the portfolio images do in here https://codeless.co/specular/default/ (e.g https://trendyluv.com/images/sample.png)

    • 10 years ago Mirela
      Participant

      Hello,

      With some playing around you could have achieved it immediately. All you had to do is set in Row settings > Background Type > Full width content; and in Media Grid settings > Grid elements per row > 4 and Gap 0px. Now you have the preview of the example.
      Please check your site.

      Best regards!

    • 9 years, 12 months ago lapizd
      Participant

      Expired

      Thank you so much! It works!

      Just one last question about this topic. Is there a way to manipulate the size of these images? or at least the height? They look too large

       

      Thank you

    • 9 years, 12 months ago Mirela
      Participant

      Hello,

      Please add these lines into your custom css box:
      .vc_gitem-zone { background-size: contain !important;} It will shrink the images.

      Best regards!

    • 9 years, 12 months ago lapizd
      Participant

      Expired

      Works! Thank you so much!

      However, the containing box is way too tall, so there is too much blank space on the top of the images. Please take a look <span style=”color: #393d40; font-family: ‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;”>e.g https://trendyluv.com/images/stripe.png</span>

      Thanks!

    • 9 years, 11 months ago Mirela
      Participant

      Hello,

      Add this into your custom css box:

      .vc_gitem-zone { height: 330px;}
      .vc-gitem-zone-height-mode-auto:before { padding-top: 64%;}

      This is the result.

      Best regards!

    • 9 years, 11 months ago lapizd
      Participant

      Expired

      It works! Thank you SO MUCH!

    • 9 years, 10 months ago lapizd
      Participant

      Expired

      Hi!

      I was doing some cross-browsing and noticed that the fixes we had applied are not longer working. They are still in my css custom box but the  the containing box is again too tall, so there is too much blank space on the top of the images. Please take a look e.g https://trendyluv.com/images/stripe.png

       

      Please help!

Viewing 17 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password