New Landing › How can we help? › Atelier › Responsive headlines/text

Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • Back to forum
    Posted in: Atelier
  • October 29, 2015 at 11:13 am #224117
    SchlenzigxJones
    Member
    Post count: 39

    Hi.

    We are setting up our new webpage and have some issues with our headlines and some of the text columns.

    Our headlines are Futura 40px. It looks good on our 15″ computer, but not so good on our phones. Is there a way were we can set the font size to something else on a phone and a tablet?

    We also have a problem with 2 columns next to each other. On the left side we have a square image. On the right side a text box with a headline, text and a CTA button. When resizing the browser the text box pushes the button down under the image, leaving a white “bar” under the image. Is there a solution to this problem? I have attached how it should look + the problem.

    Thanks in advance.

    Michael

    Attachments:
    You must be logged in to view attached files.
    October 29, 2015 at 11:22 am #224126
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    If you were using the page builder I would be able to fix these issues for you as there is solutions, however you’re using Visual Composer, and by the looks of it both issues do not have easy workarounds. As this is a 3rd party plugin I can’t spend too much time looking into it as we only support theme issues

    – Kyle

    October 29, 2015 at 12:33 pm #224162
    SchlenzigxJones
    Member
    Post count: 39

    Thanks,

    So if I did the whole thing again in the swift page builder, you would be able to fix it?

    /Michael

    October 29, 2015 at 12:41 pm #224163
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Yes you can set the content the vertical align in the row, so when you resize the browser it will change position

    – Kyle

    October 29, 2015 at 12:55 pm #224171
    SchlenzigxJones
    Member
    Post count: 39

    Thanks. Ill try it and get back to you.

    Will this also make it possible to resize the font for different screens?

    /Michael

    October 29, 2015 at 1:01 pm #224174
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Yes 🙂

    October 29, 2015 at 4:53 pm #224297
    SchlenzigxJones
    Member
    Post count: 39

    Thanks. It worked really well.

    But it raised some other questions.

    1.
    The image is blurry. When I resize the browser its crisp, but as soon as I stop it gets blurry. The image is 1280x1280px and it is placed in a row in the left 1/2 column. (it seems like it is just like that on my big, non retina, screen)

    2.
    I can se that you have a guideline for image sizes, but not for “normal” content. Are there guidelines other places? Or any best practice?

    3.
    It seems like there is a small shadow on the image from the section above and underneath. Can see anywhere that I should have press something.

    4.
    The spacing between the headline, text and button is also very big on smaller displays. I have attached an image. I use the spacer to give it the exact spacing between the texts.

    5.
    I would still love to hear how I can give the different screens there own exact font size.

    Thank you so much. I’ll start using your page builder instead from now on.

    Michael

    Attachments:
    You must be logged in to view attached files.
    October 30, 2015 at 10:57 am #224474
    SchlenzigxJones
    Member
    Post count: 39

    Hi Kyle,

    I would still like to hear about solutions to especially these questions.

    3.
    It seems like there is a small shadow on the image from the section above and underneath. Can see anywhere that I should have press something.

    4.
    The spacing between the headline, text and button is also very big on smaller displays. I have attached an image. I use the spacer to give it the exact spacing between the texts.

    5.
    I would still love to hear how I can give the different screens there own exact font size.

    November 2, 2015 at 12:45 pm #224960
    David Martin – Support
    Moderator
    Post count: 20834

    1) Your images look crisp for me. Can you clear your browser cache? Is there any specific images that you get this for?

    2) When you refer to normal content, do you mean in post images? If so a min width of 1230px will do very nicely.

    3) What page URL can that be found on, I do not see it initially.

    4) If you are using the Swift Framework, you can set the spacers to take effect on only certain screen sizes. Else you would need to utilise custom media queries to adjust your layout. Query list: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    5) You would need to adjust the font sizes for certain screen sizes using media queries. Example, iPhone6 with an increased body text size:

    /* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    body {
       font-size: 40px;
    }
}

    Thanks,
    David.

    November 2, 2015 at 1:39 pm #224993
    SchlenzigxJones
    Member
    Post count: 39
    This reply has been marked as private.
    November 2, 2015 at 10:44 pm #225216
    SchlenzigxJones
    Member
    Post count: 39

    Sorry, I was to quick. I see now that it is pretty simple to switch of the spacing on phone + tablet.

    So now I have tried to insert 20px between headline and text, and 50px between text and button and set the visibility to desktop only. As soon as I minimize my browser to the smallest possible size I still get a huge gap?

    And I still have a small shadow/vignette on my images.

    Michael

    Attachments:
    You must be logged in to view attached files.
    November 4, 2015 at 10:55 am #225695
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    To remove the image shaddow, please add this CSS

    .spb_parallax_asset {
    box-shadow: none!important;
}

    If you add me a WP login and privately post it here, I’ll login and take a look at the spacing issue.

    – David.

    November 4, 2015 at 3:34 pm #225863
    SchlenzigxJones
    Member
    Post count: 39
    This reply has been marked as private.
    November 5, 2015 at 1:45 pm #226196
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Can you add the class responsive-modification. We will then use this to tweak the height for that element on the small screen such as the iPhone. This will require a bit of tweaking to get it perfect for you layout.

    You can then add this to your CSS:

    .responsive-modification .spb-column-container.col-sm-6 {
    min-height: auto!important;
}
.responsive-modification .spb_content_element.col-sm-8.spb_text_column {
    min-height: auto!important;
}

.spb-row-container.spb-row-full-width .spb-column-container .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    min-height: inherit!important;
}

    Thanks,
    David.

    November 6, 2015 at 1:05 pm #226629
    SchlenzigxJones
    Member
    Post count: 39

    Hi,

    Should I add “responsive-modification” to “extra class” on the column or the text box?

    And will you do the tweaking or should I try to do it? If I do it, is it the 6 and 8 number I should tweak?

    Its funny, because I don’t have any gap between headline, text and button in the hero area in the top of the page? And I have global visibility on.

    Thanks so much for helping out.

    /M

  • Back to forum
    Posted in: Atelier
Viewing 15 posts - 1 through 15 (of 25 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register