I have a card in materialize:
<div class="row">
<div class="col s12 m7">
<div class="card large">
<div class="card-image">
<img class="responsive-img" src="img/xv-chars.png">
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
The image it references is 1680px wide, despite the responsive-img class it is not shrinking the width when I view it on a mobile device. Instead it is displaying the image at full size causing the user to scroll far to the right.
Here is a screenshot of it on the main page and another of scrolling to the right,, does anyone know how to force the image to show correctly in a card?
EDIT:
I added a lot of text to the card and that changed things, now the image shows correctly in all screen sizes, however the text now shows randomly and spotty. The actual text is 4 sentences long. When I lower it down to about half that I get the image problem.
There was an unclosed up in the nav bar, through everything out of wack. Closed it and text and image are responding perfectly.
Related
I'm building an app using Vuetify and I'm trying to spread out my buttons on the app bar. So I assign d-flex and justify-space-between classes to VAppBar but it doesn't work.
Turns out VAppBar actually consists of an outer <header> element and a <div class="v-toolbar__content"> element which only grows as wide as its children. The justify-space-between is applied only to the <header> element while the contents of VAppBar is placed in the <div>. VSpacer between my buttons won't work because VSpacer doesn't push its parent. Wrapping my buttons with a <div> and setting it to 100% width won't work either because it would just be 100% the width of v-toolbar__content
Any workaround to this? Is there a convention on spreading things across VAppBar?
Looks like the answer is to not assign d-flex on the VAppBar. The app bar is already a flexbox aligned to the middle and justify-* & align-* classes works just fine.
Where To Find Me?
Lorem ipsum..
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
Bootstrap 3 reads:
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
The other counterpart of .container-fluid is .container. Bootstrap 3 doc says:
Use .container for a responsive fixed width container.
Means .container is responsive but has intervals. Bootstrap applies fixed CSS width style for each media breakpoint (xs, sm, md, lg). .container-fluid expands to fill the available width (using % width).
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.
Consult here for more details.
you can define this code under the HTML element "col-lg-3" for bg-3 bootstrap this code work also with bootstrap 4 and bootstrap3.
I am using this awesome Skrollr libary: https://github.com/Prinzhorn/skrollr (animations on scrolling)
So far I have this as my implementation:
<div class="band2 landing">
<div class="container">
<div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
<img src="/static/images/snappie.png" width="280px">
<img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
</div>
</div><!-- end container -->
</div><!-- end band landing -->
basically I am moving the entire "inside" div downwards when the user scrolls down. I increase the top margin by a certain amount when the user has scrolled a certain number of pixels.
While this technically works, it produces some really weird scrolling, as you can see here on the test site: http://snappiesticker.pythonanywhere.com/splash
see how the scrollbar quivers and shakes and how its hard to scroll past the yellow bar?
I feel like hard coding these pixel values is generally not the best way to go about this and will fall apart especially when using a variety of screen sizes, browsers, etc.
What is the correct way to do this? Any skrollr experts?
Instead of using margin-top, margin-right etc.
Try using the transform:translate3d(0, 0, 0).
The first two 0's are the x and y coordinates and should be adjusted to match the effect of the margins you were setting. The third 0 is the z coordinate, which should stay at 0.
This way you are killing two birds with one stone. The transform:translate property is a lot easier for the browser to handle and the 3d enables hardware acceleration. Hopefully this will smooth things out for you.
I am new to BS3 and i'm trying to use a responsive image with the img-responsive class that spans the width of the container across all screen sizes and devices. What I have so far works apart from screen break points between 768px and 992px where the image doesn't retain its 100% width. I'm not quite sure where I am going wrong. plus I can not seem to remove left/right padding so it covers the complete width of the container. Ive tried using Jumbatron with no success.
I simply have an image in my outer container like so: -
<div class="container-fluid wrapper">
<img class="img-responsive" src="../images/home/hands-and-key.jpg" alt=""/>
</div>
Do I need to use rows and column classes for this?
I am using an background image which is inside a header tag. The coding looks like this:
<div id "header">
<div id "logo">
<div id "nav">
</div>
</div>
</div>
The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it is re-sized proportionally.
The solution I have thought of is
background-size:auto;
I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.
What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.
Thanks
Try this:
background-size: 100%;
The best method I found to work was
min-width:100%;
The only way to resize background is with JavaScript.
The code using jQuery is here: https://gist.github.com/epoberezkin/5070642