Jump to content

Archived

This topic is now archived and is closed to further replies.

margie

change mediabox resizability to better align with resizing of quickslider images

Recommended Posts

margie

Hi-

 

I have the Quickslider at the top of my pages with Mediaboxes and Textboxes below in the content area.  When I view the site on an iPhone, the image in the Quickslider adjust to a much smaller size but the images in the mediaboxes do not.  They shrink as I am dragging the screen (when viewing on a laptop) to a certain extent and then they pop back to a larger size when I reach the width of say, an iPad.  The Quickslider image just keeps shrinking so I'm left with this little image at the top and the mediabox images bigger underneath.  Is there a way to adjust the size of the mediaboxes so they change size commensurate with the Quickslider images?

 

I have tried modifying the following css thinking they would have the right affect but unfortunately, nothing happened:

 

.section-mediabox img {

max-width: 100%-I changed to 88%;

}

 

Do the mediaboxes resizability depend on the following from the content: 

<div class="pl-content ui-resizable">

     body.display-full .pl-content

Any assistance is greatly appreciated.

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
margie

unfortunately, I can't yet as the site is private, not launched and now we are working on it solely from the inside...sorry, I didn't mean to duplicate the question...I had hit the tab key and it showed that everything I had typed disappeared so I assumed (I know, always wrong to do that)I needed to re-type and send the question

Share this post


Link to post
Share on other sites
margie

Hi Danny-I've been playing with different CSS and it's getting close to what I'm I want.  I put the following css in the custom LESS/CSS:

 

#site .section-mediabox img {
  transform: scale(.8);
}
 
It shrinks the boxes (which is what I want) but I want them to shrink as the screen gets smaller (which they do but only to a certain width, I guess and then they revert to actual size).
 
Would you happen to have any css that has the same affect as the above ONLY when as you drag the screen to a smaller size and/or view it on an iPhone?
 
Thanks so much for your assistance.
 

Share this post


Link to post
Share on other sites
Danny

To be honest, without seeing your site, I am not entirely sure what it is you're trying to do or your issue. As the MediaBox should resize, when viewed on smaller widths or devices, if this isn't happening then it is likely related to CSS. However, if you want to use custom CSS and have this CSS work on specific widths or devices, then you will need to use media queries, see the links below for more information.

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
margie

Thanks for the links...this is what I'm looking to do.  It looks as if media queries are already in place as my images continue to shrink in size until I hit about 750px width on my screen.  Then they pop back up at their original size...which is ok but I'd like to decrease the size that they pop back at.  Question, where do I put these media queries if I can't access the website CSS?  Do I just add them to the Custom LESS/CSS? 

Share this post


Link to post
Share on other sites
Danny

I am going to need to see a recording of your issue, as I have just this moment added very large image to my MediaBox and it resizes without any issue. Therefore, can you use Jing or QuickCast to record yourself resizing the browser window demonstrating your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
margie

Thanks, Danny.  I actually figured it out.  I put the following CSS in the Custom LESS/CSS:

 

@media only screen and (max-width: 750px) {
  .section-mediabox img {
    transform: scale (.7);
  }
}
 
Thanks for your continued help.

Share this post


Link to post
Share on other sites
Danny

That's awesome. However, the fact remains that the MediaBox section should resize your image without the need for additional code. So if could still provide a video or screenshots of what was occurring we may be able to remove the code, as it may not be needed. Unless I have completely misunderstood your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • triggerfish
      By triggerfish+
      I am stumped here, The Mega menu drop down menus are going under the Quickslider.
      I have tried the Z-index with no luck..any ideas here would be greatly appreciated.
      http://randbplumbing.ca/slider-test-3/
       
    • triggerfish
      By triggerfish+
      Media Box not taking Google Maps input
      I have the EMBED MAP code from Google (which I have done 100''s of times before),
      I input it into the TEXTBOX or MEDIABOX SAVE it, and as soon as I refresh the page the text is gone (and of course there is no map).
      I have rebooted, refresh cache, everything with no luck..it just will not take the google maps input...it will however take and save a simple text input.
      I am using WordPress 4.5.1
      DMSVersion: 2.2.1.1
      The google code is:
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.466376170749!2d-123.11645494869879!3d49.286507879230314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548671828dbf1c61%3A0x489cbb919c49d6e!2s325+Howe+St%2C+Vancouver%2C+BC+V6C+3N2!5e0!3m2!1sen!2sca!4v1461869255884" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
      The website and CONTACT PAGE ( the map is next to the CONTACT VALRI text, there is a textbox and media box there) are here:
      http://valufitness.com/contact-us/
      Your login is:
      http://valufitness.com/val-login/
      USer= ***
      pass= ****
       
    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
    • selmakdesign
      By selmakdesign
      Hi!
      Could really use some help on this one:
      How can I customize the navigation in the quickslider?
      The navigation (previous and next slide) is a font awesome icon which looks like a simple grey box.
      1. I'd like to replace this with custom arrow images?
      2. Is it possible to also add to the navigation: first slide/last slide?
       

    • pehja
      By pehja+
      Hello!
      I am getting pretty tired of things that does not work as it should in DMS. Now it is impossible to have a two column footer with quickslider as one of the items. Take a look here http://pehjaproduction.se/kulingen/
      I have tried three column, two column, no column. nothing works. 
×