Turbo Theme - How to move up my heading and button label on home page

Comments

6 comments

  • Avatar
    Peter Gardner

    Hi Ivan Chamukov - a hack to do this could be to add a container with a negative margin into your heading. Please be careful as this may cause an issue on your mobile version.

    replace your "HAPPY PET - FUNNY HOME" with
    <div style="margin-top: -10vw;">HAPPY PET - FUNNY HOME</div>

    Depending on the placement you can increase or decrease the -10vw

    Hope this helps

    0
    Comment actions Permalink
  • Avatar
    Ivan Chamukov

    Thank you very much ! Is it similar for the button as well or no ? 

    0
    Comment actions Permalink
  • Avatar
    Peter Gardner

    Ivan Chamukov unfortunately you won't be able to do the same with the button but if you give the title a negative bottom margin too you can help pull the element up. Something like the below:

    <div style="margin-top: -10vw; margin-bottom: -6vw;">HAPPY PET - FUNNY HOME</div>

    0
    Comment actions Permalink
  • Avatar
    Ivan Chamukov

    Peter Gardner I have added " margin-top: 40vw;" in the CSS:

    The CSS code is as follows: 

    .headline {
    color: {{ settings.banner_color }};
    font-family: {{ settings.slideshow_headline__font.family }}, {{ settings.slideshow_headline__font.fallback_families }};
    font-weight: {{ settings.slideshow_headline__font.weight }};
    font-style: {{ settings.slideshow_headline__font.style }};
    text-transform: {{ settings.slideshow_headline_font_style }};
    font-size: {{ settings.slideshow_headline_size }}px;
    letter-spacing: {{ settings.slideshow_headline_letter_spacing }}px;
    line-height: 1.4em;
    margin-bottom: 15px;
    margin-top: 40vw;
    {% if settings.slideshow_headline_shadow != blank %}
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    {% endif %}

    @include respond-to('small-down') {
    font-size: 2.6em;
    }
    @include respond-to('medium-down') {
    font-size: {{settings.slideshow_headline_size | divided_by: 1.5 }}px;
    }
    @include respond-to('medium-up') {
    font-size: {{settings.slideshow_headline_size | divided_by: 1.2 }}px;
    }
    @include respond-to('large-up') {
    font-size: {{settings.slideshow_headline_size}}px;
    }
    }
    Everything looks perfect now on desktop version, however my shop now button is not visible on mobile device. Any idea how can I easily fix that ?

    This is how it looks on PC.

    But this is how it looks on iPhone 11 max pro.

    I just need to fix it so that the Shop now button is fully visible...

    Thanks in advance !


     

    0
    Comment actions Permalink
  • Avatar
    Peter Gardner

    Hi Ivan Chamukov,

    Instead of what you have done rather add this right at the bottom of your theme.scss file:

    #{{insert section id here}} .caption {
    top: 100%;
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    0
    Comment actions Permalink
  • Avatar
    Ivan Chamukov

    Thank you so much ! I will save that, I think I have managed to fix it now ! Thank you for your time ! :)

    0
    Comment actions Permalink

Please sign in to leave a comment.