My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
Related
I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here.
Overview
My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be:
finite
responsive (to different viewports) (if possible to display as many slides according to viewport width)
scroll only 100% visible slides
slides should fill the div display area
Observations
So far, I have managed to make it:
finite
Regarding responsive, breakpoints don't work well for variable width slides.
scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.
slides should fill thedivdisplay area, finite variable width slides when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:
The Code
The issue can be replicated and tested in code sandbox
...
...
Any help is welcome.
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
I'm building a responsive site using WordPress, and images are automatically set to height:100%; width:auto; and the div resizes according to window size. But this often means some images have their height set to higher than their actual height causing pixelation. What i need is something like height: 100%; width:auto; max-height:"image height here". How, if this is possible, is this possible?
The page where this is an issue is here: http://wheretoimmigrate.com/onthemouse/?portfolio=atomic-clothings-2012-campaign
I resolved it by simply making the images larger by adding a transparent background of larger size and different proportions. Tricked the system into treating it like a larger image. Worked perfectly.