Home Forums Porto Template full width pic

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 week, 2 days ago. This post has been viewed 28 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10029690

    MoiraAllen
    Participant

    Hi Rodrigo – I am once again using your great template. I have used the code below to create a full width image that will re-size. I would like stop the image from moving up and down when the page is scrolled.

    <div role=”main” class=”main full-height initial-height” id=”main”>

    <section class=”portfolio-parallax portfolio-parallax-demo-2 parallax section section-text-light section-parallax m-0″ data-plugin-parallax data-plugin-options=”{‘speed’: 1.5}” data-image-src=”img/full-width-lift.jpg”>
    <div class=”container-fluid”>
    <h2 class=”thumb-info-title font-weight-bold”>
    <span class=”thumb-info-sub-title font-weight-light”>
    </span>
    </h2>
    </div></section></div>

    There may be more straightforward way to do this 🙂 Thanks for your help.

    Moira


    #10029693

    Support2
    Keymaster

    Hello Moira,

    Thanks for the kind words.

    To do that you need remove the parallax effect. Here is the code you need:

    <section class="section section-text-light m-0" style="background: url(img/full-width-lift.jpg); background-size: cover; background-position: center;">
    	<div class="container-fluid">
    		<div class="row">
    			<div class="col">
    				<div class="spacer py-5"></div>
    			</div>
    		</div>
    	</div>
    </section>

    Also instead of a <h2> tag inside the section we put a spacer div with padding.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029711

    MoiraAllen
    Participant

    Thank you for your reply. Is there a way I can I set the height of this section? The image I am using is 1000px in height. When I view on a smaller screen the height increases but on a larger screen I can’t see the top of the image. Thanks.


    #10029717

    Support2
    Keymaster

    Hello Moira,

    You can define a min-height on the section, for example:

    <section class="section section-text-light m-0" style="background: url(img/full-width-lift.jpg); background-size: cover; background-position: center; min-height: 1000px;">

    Or add more paddings and margin on the content inside the section, for example:

    <section class="section section-text-light m-0" style="background: url(img/full-width-lift.jpg); background-size: cover; background-position: center;">
    	<div class="container-fluid">
    		<div class="row py-5 my-5">
    			<div class="col py-5 my-5">
    				<div class="spacer py-5 my-5"></div>
    			</div>
    		</div>
    	</div>
    </section>

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)