seo Question posted in
Some basic information to get you started with this can be found here.

How can I make my blogger post slider 100% width? – SEO

I have tried a lot to make it 100% width slider. But it gets chipped from the right side as you can see from my blog. http://myideakart.blogspot.in/

This is the code that I pasted on my Html/javaScript widget

<style>
/*crawlist.net slider CSS*/

.bx-wrapper {width:100%}
#slider {

    list-style:none;
    padding:0px;
}



.slider-container { 
    background:#fff; 
    width:100%; 
    height:120px;
    z-index: 126;
    padding:0px 0px 43px 0px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow:hidden; 
margin:0px 0px 45px 0px;
}

.newcon { width:100%; margin:0px 0px 43px 0px; overflow:hidden}


#slider img { 
    width:200px; 
    height:125px; 
    margin:0px; 
    display:inline-block;
    border: 1px solid #f5f5f5;    
}

#slider li {
    width:210px
}
/*crawlist.net slider CSS*/
</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             $('#slider').bxSlider({
            ticker: true,

            tickerSpeed: 5000,
 
            tickerHover: true
          });
          });
</script>

        
<div class="newcon">
<!-- crawlist.net slider starts -->
<div class="slider-container">
<ul id="slider">   
<li><a href='http://myideakart.blogspot.in/2016/08/importance-of-social-media-marketing_10.html' title="place hover text" target="_blank"><img src="http://www.typicalfinance.com/wp-content/uploads/2016/07/B2B-Marketing.jpg"/></a></li>

<li><a href='http://myideakart.blogspot.in/2016/08/mark-zuckerberg-celebrated-skip-app.html' title="place hover text" target="_blank"><img src="http://theideamarketing.com/WordPress/wp-content/uploads/2015/04/logo-idea-marketing3-300x214.png"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="http://i-tul.com/wp-content/uploads/2014/07/SEO_Blog_Tips_On_Going_Viral.jpg"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="http://btt.bloggertipstrick.netdna-cdn.com/wp-content/uploads/2015/04/blogger-on-page-seo-tips.png"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>   
</div><!-- crawlist.net slider ends --></div>
Tags:

2

Answers


  1. 0

    You have to add to .bx-window

    width:for example 1200px;

    or 

    width:100%;

    So You have to make this code:

    .bx-window{
    width:100%;
}
    Login or Signup to reply.
  2. 0

    There are two problems that causes this, first one is what Maciej suggested, add width: 100% to both .bx-wrapper and .bx-window, but in your HTML markup, you have a style="width:840px" attribute set on both elements. The problem with this is that the style attribute has higher priority than what’s written in your CSS file (so it overwrites what you write in your CSS file), so you either have to remove that markup, or move your width: 100% declarations to the elements style attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search