Jump to content

Archived

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

jDub

Full size browser window image cut off

Recommended Posts

jDub

Hi there,

 

I'm trying to make the images in the Cool Carousel skew and resize depending on the browser size.  Currently I'm using css height: 100vh, which is giving me the effect I want, however it's taking in account the size of the fixed menu bar and the content I have above it, so instead of resizing the image to the size of the browser, it's cut off and falls below the fold.  You can check this out at http://makaicollection.com/overview/

 

Any help on how to modify this would be greatly appreciated.  Again, I'd like the full image to be seen above the fold, but resize in height and width depending on the size of the browser window.

 

Thanks in advance.

 

Jaime

Share this post


Link to post
Share on other sites
Danny

Hi Jaime,

 

I have moved your topic to the correct forum location, as this is a third party store extension and therefore, we are unable to provide assistance.

 

I have also mentioned CliffordP who is the developer of the extension.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

jDub, thanks for your purchase and nice images.

 

I'm not exactly sure what you want it to do in all width and height scenarios.

 

Please be more specific for multiple scenarios.

Share this post


Link to post
Share on other sites
jDub

Okay, I've attache a diagram to help better explain.  You can also go look at the website makaicollection.com

 

Here is what's happening:

I have the DMS builder with the fixed menu at the top, taking up say 50px

Then I have a content section below the menu taking up say 75px

Below that I have the Cool Carousel, which I would like to take up the remaining space and fill the browser window, but not fall below the window.

If I'm using a smaller browser window it will resize in height so as to not fall below the browser window.

 

I've used the height: vh, however it's resizing the cool carousel to take in the size of the menu bar and content, so it's 125px below the fold of the browser window, so I loose 125px of the image I'm trying to display.

 

My goal is to show the entire gallery fully on the very first page and have it fit in the entire browser, no matter what the size is, I'm just not sure what css or java to use.

 

I hope that and the diagrams help.

 

Thanks for your help.

 

Share this post


Link to post
Share on other sites
jDub

Humm, okay I actually think I fixed my own problem.  I just put a -125px top margin on the slider, which seemed to do the trick, but if you have any other suggestions I'd be open to them.

 

Thanks.

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

Thanks for the details.

 

My concern is exactly what is happening now that you said you've fixed it...

 

Here are 2 screenshots of http://makaicollection.com/overview/on smaller-width browser:

http://cl.ly/image/0W2m1B0o2p0B

http://cl.ly/image/2d3Y141o1z2x

 

While you're wanting it to stay the full height regardless of browser dimensions, it's not scaling properly (since you're forcing unnatural dimensions on it).

 

If you're happy with the way it is, then I'm happy for you... but it's not the way I'd want it.

Share this post


Link to post
Share on other sites
jDub

I'd of course like it to scale better, however I don't really have an answer for that.  I was hoping you could advise.

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

The issue is that you're wanting to use 100vh on an HTML img element instead of using an image as a CSS background.

 

You're essentially wanting this (just demo/untested code):

<section style="height:100vh; background-image: url(my-image.jpg); background-size: cover;">

</section>

 

Instead, you have this (again, just demo code):

<section>

<img style="height:100vh;">

</section>

 

 

DMS' Canvas Area section has these options, but it's all handled as described above (CSS background image). Here are screenshots:

http://cl.ly/image/243Q272K3r1J

http://cl.ly/image/2t1j1Q3f0z3T

 

 

The only thing I can recommend is finding some JavaScript (not "Java") that emulates "background-size: cover;"

I'd suggest Googling for something like "full height rotating background images"

 

However, that's going to be out of the scope of Cool Carousel.

 

I hope you achieve what you're after. If you need some custom coding done, please PM me for a bid.

Share this post


Link to post
Share on other sites
jDub

Okay, thanks.  I have just one more issue I'd like to address. There is consistently a grey line on every slide on the full width gallery.  How do I eliminate this.  It's consistent  even with the original css.

 

Thanks.

Share this post


Link to post
Share on other sites

  • Similar Content

    • fancoder
      By fancoder+
      Hi I can't seem to get the background image for the Tour Guide section to be clear. It is always blurry. Any idea why that is? I am using a high res image. Is it a sizing issue? Thanks 
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
×