I have question how to display full width slider prestashop 1.7 on mobile phones. I can't find file where I could change this.If anybody can HELP PLEASE.
Regards,
Pat
The Slider actually depends on your theme how you present the slider TPL file with CSS.
Basically, in default theme of 1.7 your slider will be under the "container" DIV, And the Container DIV has a maximum width value set from Bootstrap about 940px max.
You need to Hook your slider out of Container DIV within WRAP div which allows you to show within 100% width.
See below how the main Container limit your ma size within 940px Slider div under container DIV
Here 940px is max width and 15px padding on both left and right.
If i just place the Slider Div out of Container then what happens? See below
Slider DIV out from Container DIV
So all you need to fix it from your theme where you HOOK slider module. By default in any responsive theme, your slider will be 100% width. This is not your slider is 100% width, This is why because your outer DIV make the limit of that width.
Hope that help you to understand how you can solve your issue
Related
I am maintaining a hubspot website and recently I have been asked to change a few things in the webpage. The first thing was, change the image in the ATF section. The section was 2 header tags followed by a form and an image placed side by side. The parent div of the form and image was set to display: flex and justify-content: space-around. Now, after changing the image, I had to resize it as well, the alignment changed. Now the form doesn't have the same left alignment as the h2 tag and p tags above it. I never touched the margin and padding of the parent div or the children divs. All I did was change and resize the image. How do I align the form element to be at par with the other things in the page. Justify-content: space-between solves the alignment issue but creates a lot of empty space in between.
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I have issue with jssor slider navigator arrows. I want to use them outside of the slider. They work fine outside on all browsers, except Safari. Is there any solution for this issue. Thank you in advance!
Keep size of 'slides container' original, and then make the size of 'outer container' bigger.
In this manner, you will see arrows beside.
And then adjust position (style="...top: ...px; ...left: ...px;...") of 'slides container', you can make 'slides container' center to 'outer container'.
See slider with arrows outside.
I have a canvas element that changes in height after some user interaction.
The canvas is contained in a div. When the canvas changes in height, it currently overflows the div vertically.
Can I add a (javascript or jquery) listener (or something like that) to the height of the canvas, that dynamically changes the div's height according to the canvas height? Or is there a css way to let the div automatically enlarge (like in a table row).
thanks
Have you tried adding this style to the div : height:auto;
As a workaround, I've put the canvas in a table. A bit ugly, but it works.