Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
is there a way (with CSS maybe) to not load images in specific layouts or screen sizes?
Eventually can be added in the SiteOrigin Image – Attribute tab…
Thanks!
Hello, Matthia!
The answer may be yes, if you determine a particular CSS style to the image.
I wonder about when you refer to the image, that you are using any add-on Page Builder SiteOrigin?
Give me more details or examples that I can help you.
Lucas Tolle
Hi,
Yes, i add an image using the add-on Page builder Siteorigin, specifically the SiteOrigine Image widget.
I was wondering if i can add CSS attributes (in the left column tab of the widget) to make NOT loading depending on the screen size.
Hello, Matthia.
Please tell me the link of the page (or create a test page, and insert the image you want to do). Then give me the link of the page (can be privately), and I will give you all the necessary code.
I need to inspect the CSS you are using to provide you the codes. So you’ll just paste and leave it running.
wait,
Lucas Tolle
Hi Lucas,
I got the full website offline running on MAMP. So I have inspected the image i got the following informations…
Does it help? If not, let me know what you need and i will try to provided it.
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
margin border padding
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
margin border padding
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
<http://localhost/alphahorse/>
<>
margin border padding
<div class="panel-grid-cell" id="pgc-4-2-2"><div class="so-panel widget widget_sow-image panel-first-child panel-last-child" id="panel-4-2-2-0"><div style="padding: 120px 0px 60px 0px;" class="panel-widget-style"><div class="so-widget-sow-image so-widget-sow-image-sow-image-b5a0057b6480">
<div class="sow-image-container">
<img src="http://localhost/alphahorse/wp-content/uploads/2016/01/Quill-293×300.png" width="293" height="300" srcset="http://localhost/alphahorse/wp-content/uploads/2016/01/Quill-293×300.png 293w, http://localhost/alphahorse/wp-content/uploads/2016/01/Quill.png 343w" class="so-widget-image">
</div>
Your local server does not allow us to visualize the images.
Please make prints and click ADD MEDIA where visualizaremos.
Waiting …
This is a private message.
I’m unofficial moderator SiteOrigin, despite determined to contribute to the forum helping people like you solve problems. Including on issues involving CSS, Page Builder SiteOrigin and Add-ons.
So why not be official moderator, I can not read your private messages. Try a better way, I’ll be happy to help you.
Lucas Tolle
Hi, no problem,
Here i send you screenshot to I’ve the idea…
I would like to drop the picture of the quill if browser is in mobile (depending on browser width)
So you want when you are mobile, the image does not appear.
That’s right?
Yes, when the page is loaded on a mobile, or at least when the menu collapses in the mobile mode (below 520px), i would like the picture not to load.
If this is the case, you will add the code below and add your divs inside it:
@media only screen and (min-device-width: 320px) and (max-device-width: 520px) and (-webkit-min-device-pixel-ratio: 2) { /* Add DIVS HERE */ div.sow-image-container{ display:none; } }If it persists, place the word “!important” before “;”. Example:
div.sow-image-container{ display:none!important; }Note that you must do so exclusively on the page you want to change. If you do this globally (using the plugin SO CSS) will compromise all images of other pages as well.
Let me know if you managed to solve your problem.
Can i do this with CSS attributes tab?, like this:
Matthia,
I did some testing here and works the way down. However, you will not get easily.
Because?
The “Page Builder SiteOrigin” does not yet have a single CSS to the related page. For this you will need to download the plugin:
https://wordpress.org/plugins/rt-custom-css-page-and-post/
After activating, a field appears on your page, allowing you to enter the code below.
@media screen and (max-width: 520px) { .so-widget-sow-image { display: none!important; }}Remember to put}} at the end to close completely.
That’s the best way, because the Page Builder CSS fields will only change the modules, lines, etc. Not the entire page.
Let me know if you managed to solve your problem.
Thank its working great!
If i we take it further,
What if i want to drop a specific grid cell, can i do this by ID?
For example the picture grid has a:
<div class="panel-grid-cell" id="pgc-4-2-2”>
If i can do this by grid ID, than i can drop specific grid in a single page…
Yes. Perfectly.
Thus, you would not need another plugin. The Plugin CSS SIteOrigin attend to your needs.
So, we tell each unique ID for each item you want and have the result.
Remember to put “.” when class was. Or “#” when ID.
Anything we’re here to help.
Lucas Tolle
Ok. it all works now! thank you very much for your great help!!
I am happy to know that everything went well!
Count on me!