Support » Theme: Twenty Seventeen » CSS Question and Responsive text inside colums

  • Resolved miakurt1

    (@miakurt1)


    Hi Everyone,

    Sorry many questions. And thank you in advance.

    I have created columns. And when I add text/content inside the columns it looks fine on a desktop browser. But when l look at the same page on mobile phone, the text/content doesn’t adjust/resize to display nicely on the mobile phone screen. The text sort of spreads down making the page longer rather than to adjusting or resizing to fit the area in the browser.

    Please can you help with the tricky to fix this?

    Also what the best way to create columns in Twenty Seventeen theme. Finally if I am doing a lot of customization by adding css. Should that css still be added in Appearance => Customization => Additional CSS or is it best to create a separate stylesheet and upload it to my theme? What the best way to add a fair amount of css the latest Twenty Seventeen theme?

    Thanks
    Miakurt

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How have you created columns?

    Thanks Andrew. Using css.

    .row {
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    }
    .columnA {
    float: left;
    width: 40%;
    padding: 10px;
    }

    .columnB {
    float: left;
    width: 60%;
    padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
    content: “”;
    display: table;
    clear: both;
    }

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What device did you intend this to work on, desktop?

    Desktop, mobile and ipads. Any tablets. Also I was incorrect, the text inside the columns doesn’t display correctly on desktop, mobile etc.

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The code makes sense for desktop and tablet, but how did you envisage it working for mobile? The columns would be tiny. Mobile users will be working on a screen from approximately 320px to 480px wide.

    For instance, the 40% column evaluates as below on mobile:

    • 40% of 320px = 128px
    • 40% of 480px = 192px

    Just to be sure, can columns be created inside pages in Twenty Seventeen theme? And how do I use css on the text to make sure it’s getting readjusted when browser is shrunk?

    Finally if I am using a lot of custom css, is the best place to add it to Appearance => Customization => Additional CSS

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    can columns be created inside pages in Twenty Seventeen theme?

    I’m not sure what exactly you’re asking. The Twenty Seventeen theme will allow you to create CSS that handles columns. However, the HTML of the columns is probably coming from a plugin you’ve installed or custom coding, rather than from the theme itself.

    Finally if I am using a lot of custom css, is the best place to add it to Appearance => Customization => Additional CSS

    Choosing between your Child Theme style.css file and the Additional CSS is up to you. What ever saves you time.

    Sorry Andrew, please be patient with me. I am not atticulating this issue well.
    I may be confusing in my explaination. The columns are fine, they resize correctly. But the text inside the coulmns, because I have it at a large font size, are not getting reduced, they sort of collapses.

    Here is the css for the text
    .some_blub{
    color: #5e6f86;
    font-size: 1.675rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    }

    so when I shrink the browser the text looks like this
    some word
    s are
    not showi
    ng cor
    rectly

    instead of this display
    some words are not showing correctly

    Thanks Andrew for all your help. I think I’ve found a solution. Using VW units for example font-size: 3.2vw;

    Thanks for all your help.

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Glad to hear you got it resolved. It also sounds like there’s a problem with your words breaking onto a new line mid-word. That shouldn’t really happen. If it happens in future could it show is the issue on your site? If it’s not live you can emulate the problem using a sandboxing tool like jsFiddle, CodePen or CSSDesk.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS Question and Responsive text inside colums’ is closed to new replies.