Switching showcase row onto other side

HTML & CSS
1

I need to rework a design where a showcase row image fills half the screen and there is some info on the right. Basically I want to alternate it for things below so they are swapped around, and I can then stack a few together.

<div class="wide-img-showcase">

    <div class="row margin-0 wide-img-showcase-row">
        <div class="col-sm-6 no-padding  about">
            <div class="no-padding-inner ">
                <div>&nbsp;</div>
            </div>
        </div>

        <div class="col-sm-6 col-sm-offset-6 no-padding gray">
            <div class="no-padding-inner gray">
                <h3 class="wow animated fadeInDownfadeInRight"><%= I18N.why %></h3>
                <div class="services-box margin30 wow animated fadeInRight">
                   
                    <h1>Headline</h1>
                    <p>...</p>

                   <div class="divide40"></div>

                    <p><a href="/overview" class="btn btn-theme-bg btn-lg">Watch Video</a></p>

                    </div>
                </div><!--service box-->

            </div>
        </div>
   
</div><!--wide image showcase end-->

The CSS for this is:

.wide-img-showcase-row {
  position: relative;
}

.no-padding.about {
  background: url(hq.jpg) scroll center no-repeat;
  background-size: cover;
  position: absolute;
  height: 100%;
}

I don’t seem to be able to swap them around. Can anyone advise please?

I want to have the new one have the next image coming in from the right and the text on the left.

Not sure what I need to adjust. :confused:

Appreciate any help

2

Got it! I needed to use offset!!

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.