I'm using the Debut theme in Shopify, which use a slick slider for the product thumbnail images. It's currently display horizontally under the main big image. However, I want it to display vertically on the side of the main image.
I was able to move it to the side with redoing my grid. Then I went into the js section and added this:
vertical: true,
verticalSwiping: true,
However, that didn't do anything. I'm not sure what else I'm missing.
Here is what my page currently look like: current look
Thank you,
Val
Related
Im trying to change the background image of slider revolution using media queries. I want to change the image to a different one for mobile devices. Is there a way to do this within slider revolution editor? So far I couldn't find any setting to do that.
If not, is there a way to add an ID or a class to the background image of the slider?
thanks!
T
Please try using the method from this article https://www.sliderrevolution.com/faq/display-different-images-on-different-screen-sizes/ to achieve what you needed there.
The documentation of slider questions within Qualtrics can be found here, but there is no mention of being able to have the slider run vertically as opposed to horizontally in the page. Does anyone know if it's possible to have the slider run vertically in the question block?
Not with a Slider question. There is a Graphical Slider question type that has the option of vertical sliders, but it also contains graphics.
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
OK, So I am working on this Nivo Slider for a website I am doing for my school... I am wondering if it is possible to actually get the Nivo Slider to transition with text below. Not necessarily a caption but like when the Nivo goes to a new image the text below will go to another bit of text. I have the Nivo working in all browsers but I was curious if anyone knew if this was even possible. I tryed putting large text in a caption but It just made the caption go all over the Nivo instead of down below the image like I want..
Thanks for any suggestions!
You can place text below the gallery using the caption option and just display it below using CSS.
Simply go in to the nivo-slider.css file and change the position of the nivo-caption class to relative.
yes this is possible, with simple css modification you can display the captions under the slider and they'll fade at the same time as the images.
Kind regards
I'm making a Chrome web app using the flexible box model, but I've gotten stuck on a (horizontal) scrollable window where I have a whole bunch of featured items.
I want to make the featured items have a constant aspect ratio, but I want them to be able to size with the rest of the page. The space that the featured items take up is 30% of height.
Any ideas to get this done? ( I can provide more information, but I'm just not where sure to start. Add a comment if you need more info and I'll edit this question).