Switch border radius at break points

[readysteadygeek]

Hi there,

I’m trying to change the border-radius of some cells I have set up in a grid, but at different breakpoints.

So for example, on XL, LG and MD I want the border-radius to smooth the cell corners as on my example screenshot but when it breaks to XM or XS, because I use the grid to switch the order of some of my cells, I want to change border-radius to smooth the correct cell corners on the cells new positioning for those breakpoints.

I’ve highlighted the border corners I’m referring to on the screenshots. So how they look on the larger size is fine, but I want to replicate that effect on the mobile view, which as you can see has no border-radius on the top right (I want that gold heading to have a 10px top right) and then remove the border-radius that appears on the top right of the ‘Course Specifics’ cell.

The staging site I’m building it on is: http://staging2.jamesr21.sg-host.com/female-hair-replacement/

I’ve tried using some CSS on the ‘element CSS’ area of the specific cell using the $el and @media, but I’m quite new to CSS and it’s having no effect so I’m not sure if I’m even putting my CSS in the correct place. I’d be grateful for any advice you can give on the code and location of the code required.

Many thanks

[christian]

Hey James,

You’ve set the border radius of the Headline element so you need to insert CSS in it’s Element CSS.

Your CSS should look something like the following Element CSS code. I believe you can work out the code you need using the sample below.

@media (max-width:979px) {
  $el.x-text {
    border-radius: 0;
  }
}

If it’s still hard to work on CSS, I’d recommend just creating a mobile version of the section and hide the section on desktop using the Hide During Breakpoints feature.

Hope that helps.

[readysteadygeek]

Hi there,

Thanks very much, that’s helped a lot for me to understand how to implement the $el value. I was not quite doing it right! Your code has helped a lot, thank you.

Final question for this, I had to put CSS for both the header, as you suggested, but also for the cell the headers are inside, as the cell behind it also needed a border radius. So for each section (there are now 6 identical looking ones), I’ve had to put 3 different element CSS codes in per section, two for the background cells and one for the top heading.

I assume it’s not good practice to have so much manual element CSS and will make amending it down the line more complex, is there a way or best practice to give classes or ID’s somehow to the repeating elements so I can somehow apply the element CSS in a single place and have it affect all the identical targeted elements on the page?

Thank you in advance for you help.

[ruenel]

Hello James,

Since a lot of the elements inside the section needs to change its borders, You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which element CSS selector you need to use. For example, if both the text and the cell needs to change the border in a specific screen, you can have something like this custom CSS added in the SECTION element:

@media (max-width:979px) {
  $el.x-section .x-cell,
  $el.x-section .x-text {
    border-radius: 0;
  }
}

Having to do it, this way, you only add the CSS in one place and easier to manage.

Hope this makes sense.