2017-01-15 14 views
0

私はワードプレススマートスライダーを使用しています。私はレイヤーテキストをロゴと同じ行に揃えたいと思います。ページ全体がブートストラップの下にあるクラス、行クラスはmax-width:75emです。親ダミーの上に伸縮スライダーイメージ

私のレイヤーをすべての画面で自分のロゴの位置に合わせたいのですが、画像を100%伸ばしたいのですが、どうすればいいですか?

私はストレッチスライダの画像をアクティブにすることができます力フルサイズオプションが、私のレイヤーの位置は残っています:0、私のロゴと揃っていません。

私の質問は、絵よりも、あまりにも混乱している場合は千個の言葉さ:

enter image description here

だから、層の位置は、ここでは同じに滞在する必要がありますが、画像は、全幅を伸ばしている必要があります。 別のオプション私は力のストレッチオプションを使用していた場合、延伸画像上にレイヤーを移動することです:

enter image description here

完全なHTMLコード:

<div class="section-element"><div class="row"> 
    <div class="lee-col large-12 columns vc_"> 
     <div class="wpb_wrapper"> 

    <div class="wpb_text_column wpb_content_element "> 
     <div class="wpb_wrapper"> 

<!-- Nextend Smart Slider 3 #1 - BEGIN --> 
<div id="n2-ss-1-align" class="n2-ss-align"><div class="n2-padding"><div id="n2-ss-1" class="n2-ss-slider n2-ss-load-fade n2-ss-desktop n2-ss-loaded n2-hover" data-minfontsizedesktopportrait="4" data-minfontsizedesktoplandscape="4" data-minfontsizetabletportrait="4" data-minfontsizetabletlandscape="4" data-minfontsizemobileportrait="4" data-minfontsizemobilelandscape="4" style="font-size: 16px; width: 1200px; margin: 0px; height: 400px;" data-fontsize="16"> 
     <div class="n2-ss-slider-1 n2-grab" style="width: 1200px; padding: 0px; border-width: 0px; height: 400px;"> 
         <div class="n2-ss-slider-2"> 
           <div class="n2-ss-slider-3" style=""> 

        <div data-slide-duration="0" data-id="1" class="n2-ss-slide n2-ss-canvas n2-ss-slide-active n2-ss-slide-1" style="width: 1200px; height: 400px;"><div data-hash="49a8ed469d6983d4898be0971ac16459" data-desktop="http://smartslider3.com/sample/programmer.jpg" style="" class="n2-ss-slide-background" data-opacity="1"><img title="" style="width: 100%; height: auto; margin-top: -100px; opacity: 1; margin-left: 0px;" class="n2-ss-slide-background-image n2-ss-slide-fill n2-ow" data-x="50" data-y="50" src="http://smartslider3.com/sample/programmer.jpg" alt=""></div><div class="n2-ss-layers-container" style="width: 1200px; height: 400px; margin-top: 0px; margin-left: 0px;"><div class="n2-ss-layer" style="z-index: 1; overflow: visible; text-align: left; left: 0px; top: 121px; width: auto; height: auto; font-size: 16px; display: block; right: auto; bottom: auto;" data-class="" data-rotation="0" data-adaptivefont="1" data-generatorvisible="" data-desktopportrait="1" data-desktoplandscape="1" data-tabletportrait="1" data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-responsiveposition="1" data-responsivesize="1" data-desktopportraitleft="0" data-desktopportraittop="-32" data-desktopportraitwidth="auto" data-desktopportraitheight="auto" data-desktopportraitalign="left" data-desktopportraitvalign="middle" data-desktopportraitparentalign="center" data-desktopportraitparentvalign="middle" data-desktopportraitfontsize="100" data-mobileportraitleft="0" data-mobileportraittop="-319" data-mobileportraitalign="center" data-mobileportraitvalign="bottom" data-mobileportraitfontsize="120"><h2 id="n2-ss-1item1" class="n2-font-c6db53bc8d0276ac23eccdcad105cb45-hover n2-style-d0ece63067cc58abc562810eba088c5b-heading n2-ow" style="display:block;white-space:nowrap;">Martin Dwyer</h2></div><div class="n2-ss-layer" style="z-index: 2; overflow: visible; text-align: left; left: 1px; top: 232px; width: auto; height: auto; font-size: 16px; display: block; right: auto; bottom: auto;" data-class="" data-rotation="0" data-adaptivefont="1" data-generatorvisible="" data-desktopportrait="1" data-desktoplandscape="1" data-tabletportrait="1" data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-responsiveposition="1" data-responsivesize="1" data-desktopportraitleft="-474" data-desktopportraittop="59" data-desktopportraitwidth="auto" data-desktopportraitheight="auto" data-desktopportraitalign="center" data-desktopportraitvalign="middle" data-desktopportraitparentalign="center" data-desktopportraitparentvalign="middle" data-desktopportraitfontsize="100"><h2 id="n2-ss-1item2" class="n2-font-1009-hover n2-ow" style="display:block;">Heading layer</h2></div></div></div>    </div> 
      </div> 
     </div> 
     <div data-ssleft="0+15" data-sstop="height/2-previousheight/2" id="n2-ss-1-arrow-previous" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile nextend-arrow n2-ib nextend-arrow-previous nextend-arrow-animated-fade" style="position: absolute; width: 32px; height: 32px; top: 184px; left: 15px;"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==" alt="Arrow"></div><div data-ssright="0+15" data-sstop="height/2-nextheight/2" id="n2-ss-1-arrow-next" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile nextend-arrow n2-ib nextend-arrow-next nextend-arrow-animated-fade" style="position: absolute; width: 32px; height: 32px; top: 184px; right: 15px;"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNzIyIDQuMjkzYy0uMzk0LS4zOS0xLjAzMi0uMzktMS40MjcgMC0uMzkzLjM5LS4zOTMgMS4wMyAwIDEuNDJsMTEuMjgzIDEwLjI4LTExLjI4MyAxMC4yOWMtLjM5My4zOS0uMzkzIDEuMDIgMCAxLjQyLjM5NS4zOSAxLjAzMy4zOSAxLjQyNyAwbDEyLjAwNy0xMC45NGMuMjEtLjIxLjMtLjQ5LjI4NC0uNzcuMDE0LS4yNy0uMDc2LS41NS0uMjg2LS43NkwxMC43MiA0LjI5M3oiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+" alt="Arrow"></div> 
</div><div class="clear"></div></div></div> 
<!-- Nextend Smart Slider 3 #1 - END --> 


     </div> 
    </div> 

     </div> 
    </div> 
</div></div> 

答えて

0

あなたのスライダーやラップのため全幅オプションを使用します

<div class="container"> 
    <!-- Content here --> 
</div> 
+0

親に行クラスまたはコンテナクラスを追加してみましたが、成功しなかった...私は革命のスライダーでそれをやったが、スマートなスライダーではなかった... – DocNet

関連する問題