Override element.style to display a different image on mobile w/ WP and @media

[SpaceTime]

Hi All,

I am having some difficulty using @media only screen to change the background-image of a div depending on the width of a device.

Currently, i am using a siteorigin plugin that inserts the background image into my Div, thus not allowing me to access the html and edit the element.style.

I have tried to over write the element.style by using !important but it does not seem to work for me.

I am trying to set the div to a different background

“???? {background-image: url(“homebannerm.jpg”) !important;}”

http://codepen.io/SpaceTime/pen/mPXEQW

This is my code pen, and the element.style i am trying to over write is:

element.style {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
border-left-width: 0px;
border-right-width: 0px;
background-image: url(“BANNERFINALTINT7.jpg”);
background-size: cover;
}

It seems sometimes that wordpress is difficult to use because of how “user friendly” it is, i was able to make a website that did not use WP responsive easily with the media queries and bootstrap.

Please let me know if you have any suggestions

[Beverleyh]

Where’s your selector? ‘????’ is not a CSS selector and I’m not sure what you’re attempting with ‘element.style’

Have you tried using one of the classes to target the element?;

.panel-row-style {background-image: url(“homebannerm.jpg”) !important;}

More info about CSS selectors http://www.sitepoint.com/web-foundations/css-selectors/

[Atelierbram]

Just watched the video on the plugin page on WordPress …

you’ll love it how Page Builder changes everything!

No offence and not even trying to be smart when I ask: not anymore, do you?

Because we see this time and time again over here: people using some sort of page-builder, or site-builder (or these kind of plugins which allow you to move “widgets” around) and then hitting a wall.

Anyway, if you are serious about webdesign, then you shouldn’t use these sort of tools, which tend to limit you with these javaScript inserted inline styles. Next best thing would be something like the new Adobe XD (Adobe Experience Design) which will allow you to be more close to the metal while being a visual (prototyping) tool.

If you want responsive images, then don’t believe false promises claiming that “webdesign can be so easy”, ’cause this can get complicated very fast.

Or, dare I say, find a webdesigner who can solve these kinds of problems for you.

[SpaceTime]

“Where’s your selector? ‘????’ is not a CSS selector and I’m not sure what you’re attempting with ‘element.style’

Have you tried using one of the classes to target the element?;

.panel-row-style {background-image: url(“homebannerm.jpg”) !important;}

More info about CSS selectors http://www.sitepoint.com/web-foundations/css-selectors/”

I have tried every combination of selectors from my DIV and none work, ??? is there because it is up for suggestions. (however i will try panel-row-style and see if that works)

“Just watched the video on the plugin page on WordPress …

you’ll love it how Page Builder changes everything!
No offence and not even trying to be smart when I ask: not anymore, do you?

Because we see this time and time again over here: people using some sort of page-builder, or site-builder (or these kind of plugins which allow you to move “widgets” around) and then hitting a wall.

Anyway, if you are serious about webdesign, then you shouldn’t use these sort of tools, which tend to limit you with these javaScript inserted inline styles. Next best thing would be something like the new Adobe XD (Adobe Experience Design) which will allow you to be more close to the metal while being a visual (prototyping) tool.

If you want responsive images, then don’t believe false promises claiming that “webdesign can be so easy”, ’cause this can get complicated very fast.

Or, dare I say, find a webdesigner who can solve these kinds of problems for you.”

I am aware of their limitations. Themes for wordpress are responsive in so that the designed features from the developer respond appropriately, obviously pictures do not fall into that category. Certainly i am not going to build a clients website from scratch if it has already been build in wordpress.

If i remove the background image from the widget i can just add it to the custom css with a media query.. but i want to avoid adding more custom css but i believe that this may be the only way to remove the image from inline.

Thank you for your suggestions, i will let you guys know what happens.

[Atelierbram]

Certainly i am not going to build a clients website from scratch if it has already been build in wordpress.

OK, so you are the webdesigner/developer of this project for this ‘client’? Anyway, nobody suggested here to drop WordPress for this, did they?

If i remove the background image from the widget i can just add it to the custom css with a media query.. but i want to avoid adding more custom css but i believe that this may be the only way to remove the image from inline.

You want to avoid “custom css” … But why?

I would suggest dropping the “siteorigin plugin”, and rebuild the layout on your own terms with the tools already at your disposal:

• HTML
• CSS
• PHP
• WordPress templates and widgets
• JavaScript

[SpaceTime]

“OK, so you are the webdesigner/developer of this project for this ‘client’? Anyway, nobody suggested here to drop WordPress for this, did they?”

They had it built in wordpress and i am just helping them out lol i did not build the original site.

You want to avoid “custom css” … But why?

I want to avoid custom css because its more work and im doing this more as a favor then a paid gig

Thank you for your replies.

[Author]

Posts