Adjustment of css rule

Hi all,

The following rule is inserting an empty string which is messing with my flexbox layout:

.row:after {
    clear: both;
   content: '';
    display: block;
}

I need to overwrite the rule to get rid of the string just for the section that contains my flexbox layout. My flexbox container div is set to justify-content: space-between; and the above rule is adding extra space.

Can someone tell me how I can do this? I don’t know if I can just override the content: ‘’; part or whether I should override the whole declaration block.

I don’t really understand the purpose of the above block or what impact it will have if I remove it but all I know is that it’s not working with my flexbox.

Would appreciate any advice.

Hi,

without content value or value normal (without quotes) the rule isn’t applied.

It’s call a clear-fix and is used to clear floats so the element it is applied to will notice the floats and contain them.

If the element use flexbox it probably doesn’t have any floats so the clear-fix isn’t needed. But since it also is a flex item you could try remove its size to not interfer with other items. E.g:

.row::after {
  flex-basis: 0; /* zero size */
  order: 1; /* could be needed for a ::before element */
}

Please tell how you did. :slightly_smiling_face:

Hi,

Thanks for the reply.

I placed the following rule in the media query to try and override it and this has worked:

.row:after {
content: none;
}

I just have a couple of other layout issues though on certain devices.

I’ve put the relevant code into a code pen at the following url:

https://codepen.io/gwnh/pen/8e9a1372d7162f1c5640ff9010fc8754

I’m using ems this time instead of pixels. I’ve used justify-content: space-between to enforce gutters between the cards and this is working on desktop screens but I’ve found that on tablets in portrait orientation, the first two cards are on one row but there is no gutter between them and the third card falls onto a separate row below. I just wondered if there’s any way to create the gutter on portrait tablets. I know my ems are not being very specific so would I need to go back to using pixels to achieve this?

Also, there is no margin between the cards on mobile phones (portrait), even though I’ve set margin-bottom so I don’t know why this rule isn’t applying.

Would you be able to take a look at my layout? I did another layout a few days ago and it worked thanks to the advice given on this forum but I can’t seem to get this one to work.

I’d appreciate any further advice.

I ended up changing the flex-grow rule to zero in the 40em media query and this fixed the gutter issue on tablets in portrait view which is great.

The only thing I still can’t work out is why the margin-bottom isn’t applying so if anyone has any tips, I’d be grateful.

I also wondered if it’s good practice to use ems instead of pixels in media queries.

I think the recommended non value is normal, but also other values as none or initial would work, if I’m not mistaken.

IMHO it is not, as the screen size is reported in px. Besides you would never know at what pixel it would kick in so you could end up breaking things if you mix with px in some places.

I think you’re right about not using ems - that’s probably why the margin-bottom isn’t kicking in because I have no idea what the pixel equivalent of 40ems is so I don’t know if it’s targeting phones.

I guess I’ll need to go back to pixels.

Thanks so much for your advice.

In your pen the 2em bottom margin on .card-home seems to kick in. :slightly_smiling_face:

No, and even if you set the html to the common 16px font-size you still wouldn’t know if the user has changed the default font-size. E.g: the browser I checked your pen with has 14px as default.

No. There are two media queries, 40em and 60em, the 60em query has an extra curly bracket that makes it end after the first rule-block.

Didn’t notice that before. :blush:

1 Like

I assume this is part of a larger bootstrap layout (because of the similar class names) and if that is the case you should not directly change .row but instead use your own class to over-ride the default for your specific use case.

Otherwise you risk breaking the global function of the framework (assuming this is part of a framework). :slight_smile:

2 Likes

Thanks to you both for the extra info. I’ve used my own “cards” class to override the default - thanks for reminding me.

Just with regard to using pixels in the media queries (instead of ems), is there any online resource that lists the pixel dimensions for the different devices? I just wanted to make the flex-basis 100% for all phones in portrait view so that each card is on its own separate row, then keep it at 50% for phones in landscape view (where the cards will be two-up in a row) until it gets to desktop view where it should be 33% as I’ve got it now (3 to a row). I just don’t know what pixels to target to get this right.

If I could get a bit more help, I’d really be grateful.

Don’t even go there:)

There are just too many devices to keep track of and indeed some phones have wider portraits than others have landscape so not only would you have to check for every single phone in portrait view you would have to do the same for landscape view also and your media queries would run into the hundreds if not thousands.

In the end all you are interested in is the width that your design needs to change and not some device that has been invented or may be invented in the future. It is your design that dictates where a break point should appear.

Open your browser desktop wide and then slowly close the width of the browser window. At some point the design will look awkward and need to change (maybe from 3 columns to 2) or be rearranged in some way to fit better. It’s at this point that you set your media query and make the design look better () you can find the screen width from most devtools). Continue this process until the screen width is down to about 320px and you end up with a set of media queries that automatically caters for every device ever invented or invented in the future without needing to know a single thing about their size.

With a fluid design and a few well chosen media queries you have solved responsive design.:slight_smile:

Don’t pander to device widths as there is no such thing as a common width and no guarantee that a new phone may be bigger or smaller than a previous version (take the iphone SE for example where screen size got smaller compared to other iphones).

There are some phones bigger than tablets, and there are some tablets bigger than laptops, and some laptops bigger than desktops. Forget about devices and work on what widths your design needs to function best at.

2 Likes

Ok great - I’ll try and adjust the code and let you know. Thanks again

Hi Paul,

Would you be able to take a quick look at the adjustments I made to the css:

I thought that it would be best practice to target the smallest devices first so those rules are outside of the media queries then the min-width 960px and 640px media queries set the flex basis for other sizes.

Everything seems to be working but I just wanted your input to see if I’m setting things up correctly.

Thanks again.

You have some typos in your code giving you a horizontal scrollbar.

Try changing the css to this:

.container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
.container:after {
	display: block;
	clear: both;
	content: '';
}
.row:after {
	clear: both;
	content: '';
	display: block;
}
.home-blog {
	padding: 60px 0px 0px;
	background: #fff;
}
.card-home {
	background: white;
	border: 1px solid #d4d9dd;
}
.card-home a {
	color: black;
	text-decoration: none;
}
.card-home a:hover {
	box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
}
.card-content {
	padding: 1.4em;
}
.card-content h3 {
	text-transform: capitalize;
}
.card-content h2 {
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: normal;
}
.card-content p {
	font-size: 95%;
}
.card-content p:last-child {
	color: #42b4e4;
}
.card-img-container {
	background-color: grey;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
}
.cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: -1em;
}
.card-home {
	display: flex;
	margin-bottom: 2em;
	flex-grow: 0;
	flex-shrink: 3;
	flex-basis: 100%;
}
@media screen and (min-width: 640px) {
	.card-home {
		flex-grow: 0;
		flex-shrink: 3;
		flex-basis: calc(50% - .5em);
	}
}
@media screen and (min-width: 960px) {
	.card-home {
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: calc(33% - 1em);
	}
	.cards:after {
		display: none;
	}
}

Remember you must add the viewport meta tag or you won’t be able to test devices properly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In codepen you can add this via the settings.

Great , thanks again for the advice - really appreciate it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.