Support Forum

Home Forums SwagMoment HTML TEXT ROTATOR bug

All Wordpress Themes

This topic contains 54 replies, has 5 voices, and was last updated by  Support Team 4 2 years, 2 months ago.

  • Author
    Posts
  • #14128

    surfmen
    Participant

    Hello,
    I have a problem with older version of SWAG theme i bought (http://themeforest.net/item/swagmoment-parallax-onepage-css3-html5/5095691). In TEXT ROTATOR when its changing in third box there is always last line from second box remaining. Could you help me, provide fix or code?
    Thank you

  • #14129

    Support Team 4
    Participant

    Hello!
    Give me link to this page on your site and show on screenshot, please.

  • #14130

    surfmen
    Participant

    see here. its clearly visible on first slide http://bekoff.cz/gravitron/

  • #14131

    Support Team 4
    Participant

    Ok, I see and I’ll try help you. I need a time.

  • #14132

    Support Team 4
    Participant

    One question, what browser you use?

  • #14133

    Support Team 4
    Participant

    Try to use this css:

    body .content-rotator {
        padding-top: 0;
    }
  • #14134

    surfmen
    Participant

    I use chrome

  • #14135

    surfmen
    Participant

    where to paste this css?

  • #14136

    Support Team 4
    Participant

    You can insert css code into file main.css, to bottom.

  • #14137

    surfmen
    Participant

    it works, but now there is almost no space between the line and text. Some idea?

  • #14138

    Support Team 4
    Participant

    Now if disable this css, is working normal, you changed something?

  • #14139

    surfmen
    Participant

    No I didnt change anything. just add this css. When I delete this css I can see this bug again. now as you can see is sticked to the line

  • #14140

    Support Team 4
    Participant

    Ok, don’t touch, please, I work.

  • #14143

    Support Team 4
    Participant

    I can propose next solution:
    1. Edit file index.html, in file find code which begin from <!-- === TEXT ROTATOR === --> and modify to this:

                <!-- === TEXT ROTATOR === -->
                    <div class="anim-delay animated fadeIn">
    		  <div>
                        <div class="content-rotator">
                            <div class="inbox">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
                                aliquam vehicula est, sed fermentum nulla interdum
                                vehicula est, sed fermentum nulla interdum vel.
                            </div>
                            <div class="inbox">
                                Aliquam vehicula est, sed fermentum nulla interdum vel. Integer
                                Lorem ipsum dolor sit amet, consectetur adipiscing!
                            </div>
                            <div class="inbox">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
                                Aliquam vehicula est, sed fermentum nulla
                                ullamcorper cursus tellus.
                            </div>
                        </div>
    		  </div>
                    </div>

    You need to include block <div class="content-rotator"> into new DIV block.
    2. Insert to style.css this code:

    .anim-delay.animated.fadeIn > div {
        background: url("file:///D:/work/wordpress/themeforest-5095691-swagmoment-parallax-onepage-css3-html5/full/html/html/images/textrotator.png") no-repeat scroll center 100px rgba(0, 0, 0, 0);
        display: inline-block;
        width: 100%;
    }

    Where 100px it’s position of your horizontal line.
    And this css code:

    div.content-rotator {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        margin-top: 140px;
        padding-top: 0;
    }
  • #14146

    surfmen
    Participant

    it works but now as you can see the line is gone. where is the hidden trick?
    Thanks

  • #14147

    Support Team 4
    Participant

    I think in css, it should look as:
    background: url("http://bekoff.cz/gravitron/images/textrotator.png") no-repeat scroll center 100px rgba(0, 0, 0, 0);
    Where http://bekoff.cz/gravitron/images/textrotator.png path to image.

  • #14148

    surfmen
    Participant

    of course. Thanks

  • #14149

    Support Team 4
    Participant

    You are welcome!
    And don’t forget to see on my signature 🙂

  • #14189

    surfmen
    Participant

    Thank you again for your help. I have one more issue, when I display website on notebook with res. 1366×768 it doesnt appear properly, it appears on the second slide overwriting headline. See attached printscreen. Could you help me?
    Thanks

  • #14191

    surfmen
    Participant

    file

  • #14193

    Support Team 1
    Keymaster

    Hello surfmen. Thank you for contacting our support team. Let me please inform you that investigation of your problem can take little more time. We will try to contact you as soon as it possible regarding that issue. Thank you for your patience and understanding.

  • #14199

    Support Team 4
    Participant

    Hello, surfmen!
    You can add css code:

    @media screen and (max-height:768px) {
    #home .main-logo {
        margin-bottom: 110px;
        margin-top: 100px;
    }
    }

    Where values 110 and 100 are default. Also you can set more small values, for example 85px and 80px.

  • #14211

    surfmen
    Participant

    Thnaks, but it doesnt work, where should I paste it exactly? in style.css or main.css?

  • #14212

    Support Team 1
    Keymaster

    Hello, Surfmen!
    You should paste this code in main.css. If it doesn’t work, try to add !important.
    You should get next code

    @media screen and (max-height:768px) {
    #home .main-logo {
        margin-bottom: 110px !important;
        margin-top: 100px !important;
    }
    }
  • #14213

    surfmen
    Participant

    I just did it without any effect:-((( still on the second page

  • #14215

    Support Team 1
    Keymaster

    I am sorry. I understood the problem. Sup 4 wrote you code but use default values and he wrote about it and proposed you to change them.
    So I propose you to delete the previous code and paste this one

    @media screen and (min-height:710px) (max-height:768px) {
    #home .main-logo {
        margin-bottom: 145px;
        margin-top: 130px
    }
    }
    @media screen and (min-height:624px) (max-height:709px) {
    #home .main-logo {
        margin-bottom: 110px;
        margin-top: 80px
    }
    }
  • #14223

    surfmen
    Participant

    Unfortunately this doesnt make any difference :-(( Textrotator appears still on second page

  • #14224

    Support Team 1
    Keymaster

    Have you saved changes? Because I see the previous code here http://prntscr.com/5o6cf7.

  • #14225

    surfmen
    Participant

    I am testing on offline version but i have uploaded online also now, no results, tried to use !important also…

  • #14226

    Support Team 1
    Keymaster

    Dear surfmen! I appologize but it is my mistake. I made an error in the code.
    This is the correct one

    @media screen and (min-height:710px) and (max-height:768px) {
    #home .main-logo {
        margin-bottom: 145px;
        margin-top: 130px;
    }
    }
    @media screen and (min-height:624px) and (max-height:709px) {
    #home .main-logo {
        margin-bottom: 110px;
        margin-top: 80px;
    }
    }
  • #14227

    surfmen
    Participant

    I saw the mistake but again still doesnt work…:-(

  • #14228

    Support Team 1
    Keymaster

    Ok, I am confused. Lets start from the beginning. Could you please send me a screenshot with your problem. Maybe I wron understood you 🙁

  • #14230

    surfmen
    Participant

    Ok, the problem is that on small screen (laptop) the textrotator appears on second slide not on the first as on monitor screen.
    see attached printscreen.

  • #14232

    ggt
    Keymaster

    Hello,surfmen!
    Try this CSS in Style.css
    h1 { margin: 110px 0 !important; }

  • #14234

    surfmen
    Participant

    Hi,This affect all slides, so headline is away. Could be applied only for text rotator?

  • #14235

    Support Team 4
    Participant

    Hello!
    Give me resolution screen what you use on this device.

  • #14245

    surfmen
    Participant

    Please find attached printscsreens expaining the situation

  • #14246

    surfmen
    Participant

    1

  • #14248

    surfmen
    Participant

    2 – gap after using the last posted fix

  • #14250

    surfmen
    Participant

    3 – optimal view

  • #14253

    Support team 8
    Participant

    Hello surfmen. Thank you for contacting our support team. Let me please inform you, that processing of your request can take some time. We will get back to you as soon as it possible. Thank you for your patience and understanding.

  • #14258

    Support team 8
    Participant

    Dear surfmen. I am sorry for the delay with the answer. I would like to recommend you to try the next .css code in order to fix your problem:
    1) Please delete the code which you have added before, using our recommendations, and then add the next lines to your style.css file:

    .main-logo { margin-top: 70px !important; }
    .container.text-center > div {
    margin-top: 10px !important;
    }

    If the issue is not resolved, kindly please let us know. We are always glad to assist you.

  • #14290

    surfmen
    Participant

    Thanks for that. Almost there. Now on small screen ok, but on big monitor it moves everything from the fisrt slide to the tip maximum. Ho do I adjust that? see printscreen top

  • #14291

    Support Team 4
    Participant

    Hello!
    Moment, please)

  • #14292

    Support Team 4
    Participant

    Please, check this css:

    @media screen and (min-height:624px) and (max-height:768px) {
    #home .main-logo {
        margin-bottom: 20px;
        margin-top: 100px;
    }
    }
  • #14307

    surfmen
    Participant

    As i was instructed by support team 8 I deleted this css

    • #14308

      ggt
      Keymaster

      Hello, surfmen!
      Sorry for a long reply. We need an ftp access to resolve your issue correctly.

  • #14309

    surfmen
    Participant

    FTP
    replikant511.thinline.cz / port 21
    user:gravitron_cz
    pass:pentium33

    Please try it on diferent screen resolutions
    Thanks

  • #14310

    Support Team 4
    Participant

    Hello, again!
    I could not test changes, because they not work after insert on this ftp address.
    Please add this css and check.
    Css code:

    @media screen and (min-width:321px) and (max-width:480px) {
    #home div.content-rotator {
        height: 80px !important;
        margin-top: 0;
    }
    }
    
    @media screen and (min-width:600px) and (max-width:800px) {
    #home .main-logo {
        margin-bottom: 90px;
        margin-top: 80px;
    }
    #home div.content-rotator {
        font-size: 16px !important;
        line-height: 16px;
        margin-top: 60px;
    }
    }
    
    .anim-delay.animated.fadeIn > div {
        background: url("http://bekoff.cz/gravitron/images/textrotator.png") no-repeat scroll center 100px rgba(0, 0, 0, 0);
    }
    
    @media screen and (min-width:1360px) and (max-width:1440px) {
    #home .main-logo {
        margin-bottom: 70px;
        margin-top: 70px;
    }
    #home div.content-rotator {
        font-size: 20px;
        line-height: 20px;
    }
    }
    
    @media screen and (height:600px) and (width:1280px) {
    #home .main-logo {
        margin-bottom: 40px;
        margin-top: 50px;
    }
    #home #nav-boxes a > div {
        font-size: 40px;
        height: 50px;
        line-height: 54px;
        width: 50px;
    }
    #home div.content-rotator {
        font-size: 20px;
        line-height: 20px;
        margin-top: 70px;
    }
    .anim-delay.animated.fadeIn > div {
        background: url("http://bekoff.cz/gravitron/images/textrotator.png") no-repeat scroll center 50px rgba(0, 0, 0, 0);
    }
    }
  • #14314

    surfmen
    Participant

    which CSS file?

  • #14315

    Support Team 1
    Keymaster

    Hello, surfmen! Sorry for delay. You should add this code to style.css.

  • #14326

    surfmen
    Participant

    Hello, I paste it and as you can see it id practicaly nothing. Still bad positiong on small screens.

  • #14344

    Support Team 1
    Keymaster

    Hello, Surfmen! I propose you to add this code for displays with 481-707 px.

    @media screen and (min-width:481px) and (max-width:707px) {
    .box-table {
    margin-top: -145px;
    }
    #home div.content-rotator {
    height: 80px !important;
    width: 400px;
    }
    }

    I have checked you site with another small screen sizes. It looks good.

  • #14434

    surfmen
    Participant

    It doesnt help anyway… Its wasting of time at the moment,I just delete it.
    Cant believe that is so diffuclt to get it right…
    Thanks

  • #14435

    Support Team 4
    Participant

    Hello, again.
    Please, give me the exact dimensions of the screen resolution and the correct link to your live site.

The topic ‘TEXT ROTATOR bug’ is closed to new replies.