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.
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 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 have this image http://s23.postimg.org/on361znhn/Transform_Marketing.png
and I want to put 3 colored and centered (learn more) texts under each image. I tried this:
<p>
<span style="float:left;margin-left:100px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:170px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:120px;margin-right:40px"> Learn More</span>
</p>
but the link is not working. I want an option to change (learn more) text colour and font size and have it centered under each image.
Thank you for help.
to center each text below its image, the below code should help:
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img1.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img2.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img3.png"><br />learn more
</div>
Hope it helps.
Update (in case only one image):
You have to know the image width, adjust the text positions below the image using photoshop (you should use the same font & size you are using on the website).
Adjust the margins of your spans to center the text manually.
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/
I have this view which can rotate a div element. Something like
<div class="rotatable">
<div class="front">
{{outlet front}}
</div>
<div class="back">
{{outlet back}}
<div>
</div>
Now I have this index template which contains two of these rotatable elements. Each rotatable elements has a different front and back. So it could look like this
<div id="index">
{{#rotatable}}
{{outlet front App.FrontView1}}
{{outlet back App.BackView1}}
{{/rotatable}}
{{#rotatable}}
<div>This should show up inside {{outlet front}}</div>
{{outlet back App.BackView2}}
{{/rotatable}}
</div>
This doesn't work of course, but how should this be done ?
Cheers
I guess this question was a little bit unclear. Anyway, the answer is given in this post
EmberJs: how to use connectOutlet