I am using Zurb 6 and trying to hide some elements on small and medium screens using the visibility classes, however my desktop is being detected as a Medium Screen. Why is this?
My fullscreen width is 1920px, I have not altered the breakpoints (copied in below, and there is example code here that is being hidden on my desktop.
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
<!-- Signature -->
<div class="signature-container">
<div class="row signature">
<div class="large-7 columns">
<p>Thisi s some example text</p>
</div>
<div class="large-1 columns arrow hide-for-small hide-for-medium"> </div>
<div class="large-4 columns digital-signature text-center">
<img alt="Signature" src="img/signature.png" width="220">
</div>
</div>
</div>
<!-- /Signature -->
The way Foundation 6 visibility settings work are based on the defined size and up. So your hide-for-medium is actually for medium and larger. You need to define it as hide-for-medium-only to not hide for larger than medium.
I would actually do hide-for-small and show-for-large which should fix your issue.
See F6 Documentation: http://foundation.zurb.com/sites/docs/visibility.html#hide-by-screen-size
Related
I'm trying to have a Bootstrap section that's 1/2 UL & 1/2 image. The code works fine at full screen, but when I start reducing the size of the screen the image begins to shrink & show the section's background (see images). hot can I go about having the image always remain full cover in 1/2 of the section until it reaches the break point # small width? Thanks for any help you can give!!
Full Screen works fine | Image begins to "break" around medium | Works fine again at small screen
<section class="bg-primary-cut" id="cuts">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<h2 class="section-heading-cuts text-uppercase">Pup List</h2>
<hr class="light">
<ul class="ul-cuts">
<li>Short one </li>
<li>Short one </li>
<li>a little bit longer one </li>
<li>short one </li>
<li>also a tad bit longer </li>
<li>last shortie </li>
</ul>
</div>
<div class="col-lg-6">
<img class="media-object img-responsive" src="https://unsplash.it/1200/600?image=1062" height="500">
</div>
</div>
</div>
</section>
Set the height of the image to 100% so it will fill. Although it may skew it out of proportion.
OR you can see at which point it starts to break and set different styles for that breakpoint with media queries to override bootstraps sm/md/lg breakpoints.
I would be set a differente height of viewport of the slides that are contained in a section.
Example:
I have:
<div class="section fp-auto-height">
<div class="slide" id="slide1"> CONTENT </div>
<div class="slide" id="slide2"> CONTENT</div>
<div class="slide" id="slide3"> CONTENT</div>
</div><!-- end section-0-->
The content of the slide1 is too long, and I have used the class fp-auto-height for see all the content on mobile, but when I go to the slide2 (that have pour text), I see the height to big because fullpage.js have set the same height of slide1 to slide2.
Can I resolve?
Thank you
Best regards
Mario
What you are asking for doesn't make much sense from the design perspective.
You can not slide a bigger section to a smaller one. The slides form the slider has to have the same height.
Ok, so here is what I am trying to do:
- I am building a portfolio slider that shows images for all of my projects.
- Each project has multiple images that I would like to show on its own slide.
- For example, after you slide through project 1's images (each on their own slide), the next slide will start with project 2's first image and so on.
- I can do this the long way, but I am trying to group my projects into their own objects, including their name, the client it was for and the images associated to that project.
- My end goal is to have an organized object, but all the images are gathered and shown in the slider one after the other. When a new project's image is shown, I also would like to know which project object I am on so I can get the project name, index and client it was for, so that I can change info on the page.
- I hope this is not too confusing.
Here is what I have right now for the object
JS:
mainApp.controller("mainController", function($scope) {
$scope.portfolio = [
{name:'Portfolio 1', image:['images/test_1a.png','images/test_1b.png','images/test_1c.png'], client:'Client 1'},
{name:'Portfolio 2', image:['images/test_2a.png','images/test_2b.png'], client:'Client 2'},
{name:'Portfolio 3', image:['images/test_3a.png','images/test_3b.png','images/test_3c.png'], client:'Client 3'}
];
});
This is what I was starting to try when I got stuck. Obviously, this is not what I need, but it let's you see where I am trying to go.
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
Any and all help it super appreciated!
You're nearly there.. Your issue is using src instead of ng-src.
Try:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" ng-src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
I'm working on a page where a lot of images are being presented in a grid. I am using the Foundation grid for this. I have three types of sizes: landscape, portrait and square. In the design, the landscape and portrait blocks are exactly the same size(just turned 90deg). And that's where the problem begins..
I rather not use pixels to setup the dimensions of my images here, so is there a clean way I can make the sizes of 'landscape' and 'portrait' the same without using pixels?
Here is my HTML:
<div class="products">
<div class="product landscape medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_liggend.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product portrait medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_staand2.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product square medium-12 large-8 xlarge-6 columns overview">
<img src="img/gude5.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
Can't be done without some reference size. You can try some CSS like this:
.products img {
width: 100%;
height: auto;
max-height: 100rem;
}
But your portrait images will narrow up (look squashed).