CSS Question and Responsive text inside colums

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;
}

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.

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

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.

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.