Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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].
Thread Starter
lasca
(@lasca)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Where are you adding that? It’s not coming through to the webpage.
Thread Starter
lasca
(@lasca)
I am adding that to my scc style sheet under the
@media screen and (max-width: 980px) {
entry.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Any particular reason you want it to be within a 980px width?
Thread Starter
lasca
(@lasca)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
Thread Starter
lasca
(@lasca)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you resized your browser to a smaller width?
Thread Starter
lasca
(@lasca)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Get rid of the media queries in your CSS. It does not seem like you need or want it.
Thread Starter
lasca
(@lasca)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
![[screenshot]](http://snag.gy/vRS5T.jpg){kind=link}