How to fix a wild card code conflict?

HTML & CSS
1

Hay all,
I have tried to incorporate an image gallery that I like into my page. I kept the css for it separate which is working fine. Where the problem is there is a wild card in the css and if it stays if breaks all of the settings in my main css and if removed it breaks the left alignment of the image gallery.

This is the code that is causing all of the issues.

* { 	margin: 0; 	padding: 0; }

That code should only apply to the items in the following css page and not effect the original css but I am not sure where to apply it to make it work without breaking either the main page or the gallery itself.

This is the entire gallery css.

 }
.grid-container {
	display: none;
}
/* ----- Image grids ----- */
ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-shadow: 0 0 5px #ddd;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ul.rig li img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
}
ul.rig li h3 {
	margin: 0 0 5px;
}
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */


}
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
}

@media (max-width: 1199px) {
	.container {
		width: auto;
		padding: 0 10px;
	}
}

@media (max-width: 480px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	ul.grid-nav li a {
		display: block;
	}
	ul.rig {
		margin-left: 0;
	}
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}

I will create a fiddle account which I don’t have yet that I just learned of and will try to post more there if needed.

Thanks

2

That’s c alled the universal selector. It grabs every element. However, it can also be easily overridden.

Can you go to codepen.io and put your HTML/CSS in, and then, with as much detail as possible, please tell us what display is wrong? Something obvious to you is not obvious to us :slight_smile: .

Or a live website would be just as good (again, explanations!)

3

Thanks RyanReese
I have uploaded two different versions for comparison.

In the first link below what you will see as the problem (don’t look at the tables they are not ready to go) if you scroll to the photos as the last thing in the bottom of the main container you will see the left and right margin are not matched. As you make the page with a narrower width view port it gets even more noticeable. That is the issue with that setup.

First Sample

In the second link the margins on the gallery are correct when using the override code. However it breaks the margins and padding in the rest of the page making go off the page and blend into each other, most noticeable again when you make the narrow view port.

Second Sample

So basically what needs to happen is I need the universal code to only apply to elements on the gallery style sheet and ignore any settings in the main style sheet.

I have tried to make adjustments to the settings there and have learned how to change the look of the boarders around the images but I believe what I need is to add some settings to something there or create a set of nested divs to fix the issue by giving the parent div a new class.

Hope that is enough explanation.

4

Eh it’s a bit awkward the way it is setup. Working with the first setup…

  1. Remove margin-left:-2.5%; on ul.rig. Add in padding:0;
  2. Add in this
ul.rig li:nth-child(2n+2) {
  margin-right: 0;
}
ul.rig li:nth-child(2n+1) {
  margin-left: 0;
}
5

Does that mean I should still look for another solution or go with this?

Basically I just need to show some pictures on the site. I thought this would be a good way for users to choose how many images they see so they can control the size shown.

I do want if at all possible to stay away from any java requirements. I know the buttons are java controlled but if java is off the gallery reverts automatically to a two column layout. There are not very many responsive solutions I saw for images.

6

It is done, however still weird. I guess since you said it was awkward code maybe I will just look for yet another solution.

My main thing is most non js gallery’s I found did not offer anything but square images to be included.

7

@RyanReese Because of that statement I found a different way to accomplish what I needed to do. Thank you for saying how it is. I would rather abandon something strange and find a better way when possible.

8

That’s good. Many people here get upset when they hear how it really is. Kinda shocking that they think they are perfect :wink: .

Glad you are open for criticism :slight_smile: . All of us are learning still.

9

Ya know, I don’t know your full experience but I believe it is much more than I can imagine. Doing this is only part of my job and I can not make it a full time project so I can only hope to get comfortable with the process but not a pro or super designer.

10

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