CSS formatting not working (specificity issue)

Use a browser developer tool for this kind of CSS work.
I use Google Chrome’s developer tool and found the HTML element you need to target [screenshot].

HI Andrew,

Thx for your reply. i have been been using Firebug fir that purpose and have not been able to solve my problem.

On grounds of you screen shot I have changed my scc and I am still no further.

#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left;
}

I have tried to use the .post-entry, and the content-full selectors in conjunction with the above id’s and is still not getting the formatting required.

Where are you adding that? It’s not coming through to the webpage.

I am adding that to my scc style sheet under the
@media screen and (max-width: 980px) {
entry.

O meant to say style.css

Any particular reason you want it to be within a 980px width?

This is the specific theme that i am using media construct: taken from the parent style.css file

@media screen and (max-width: 980px) {
/* =Domain registration page
-------------------------------------------------------------- */
body {}
#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left;
}
/* =Shortcut bars on services pages
-------------------------------------------------------------- */
#shortcutbarimg,
#shortcutbardes{
	clear: left;
	position: realtive;
	width: 960px;
	margin-top: 150px;">

}

#scbimg1,
#scbimg2,
#scbimg3,
#scbimg4,
#scbimg5,
#scbimg6,
#scbdec1,
#scbdec2,
#scbdec3,
#scbdec4,
#scbdec5,
#scbdec6{
	position: relative;
	float: left;
	width: 150px;
	text-align: center;
}
}

@media screen and (max-width: 650px) {

}
@media screen and (max-width: 480px) {

}
@media screen and (max-width: 320px) {

}
@media screen and (max-width: 240px) {

}

I was taking that as it start with the biggest i will start with the bigegst screen formatting and the adjust it as the screen gets smaller.

I was just formatting with in their structure.

You shouldn’t be editing the theme’s files because your modifications will be erased when the theme updates.

Use a Custom CSS Manager plugin to hold your CSS modifications.

Your CSS does actually work, but only within that 980px width. I’m not sure on your intent, do you want this 980px width?

I am using Child theme, I was just looking at the structures int he parent theme to make sure I keep inline with their styles.

I have just done it under the all the media size screens and it is not working.

The first indication that is it not working there should be a 100 px space between the breadcrumbs and the image.

@media screen and (max-width: 980px) {
/* =Domain registration page
-------------------------------------------------------------- */
body {}
	#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left; 

}
}
/* =Shortcut bars on services pages
-------------------------------------------------------------- */

@media screen and (max-width: 960px) {
#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left; 

}

}
@media screen and (max-width: 480px) {
#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left; 

}

}
@media screen and (max-width: 320px) {
#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left; 

}

}
@media screen and (max-width: 240px) {
#dmdataholder{
	position: relative;
	width: 800px;
	margin-top: 100px;
}

#dmimg{
	position: relative;
	float: left;
	width: 200px;
}
#dmdata{
	position: relative;
	float: left; 

}

}

The text should be next to the image on the right side not underneath.

Have you resized your browser to a smaller width?

OK on very small screen it works correctly. On slightly bigger screen it does not. Now I am even more confused.

On full sized browser it does not work on larger size it does not.

Get rid of the media queries in your CSS. It does not seem like you need or want it.

OK thx that did work. thx.

So i am not crazy to want to use the selectors I was using at the start.
Now just to learn why the media queries was mucking everything up for me. But that is for another session on lynda.com………..

Thx for you help.

See https://css-tricks.com/css-media-queries/ for learning Media Queries.