How to Change Responsive Width Stop Settings?

Our website includes advertisements with dimensions of 300 x 250 pixels in the right sidebar. To display correctly on an iPad with screen resolution of 2048 x 1536 pixels the responsive width settings need a minimum width of 1200 pixels.

See attached screenshot from iPad, which shows the advertisement in the sidebar overflowing the edge of the sidebar. i.e. part of the advertisement has been cut off.

We have tried adding the following code into the style.css file but this doesn’t work!

Please advise how this issue can be resolved.

The code tried, which doesn’t work is as follows:

@media (max-width: 1200px) {
  .pull-right {
    float: none !important;
  }
  .pull-left {
    float: none !important;
  }
  .flex-caption {
    display: none;
  }
	}

Hi @supertrooper,

I hope you are well today and thank you for your question.

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

Best Regards,
Movin

Hi Movin

A typical URL showing the display problem is as follows:

https://focusingonwildlife.com/test-platform6/

Please note the display problem only shows on a iPad.

There is no problem on the desktop.

To resolve that problem you can use Google responsive ads as described in the following pages.

https://support.google.com/adwords/answer/6363750?hl=en
https://support.google.com/adwords/answer/7005917?co=ADWORDS.IsAWNCustomer%3Dfalse&hl=en

Hi Movin

I agree that one solution is to use Google Responsive Ads. However Google is one of the few companies offering the use of responsive ads.

Most of the Ads we use are fixed size 300 x 250 pixels. We need to find a way to change the responsive width stop settings.

Please advise.

Then you can force sidebar to have that much width by using below custom CSS code.


#secondary {
    min-width: 390px;
}

Hi Movin

After inserting this piece of code into the childtheme’s style.css the following was observed:

As the browser width drops below approx 1,200 pixels (800 pixels main content + 400 pixels sidebar), the content width is instantly pulled in to approx 992 pixels (661 pixels main content + 331 pixels sidebar).

With a sidebar of only 331 pixels this is too small to accomodate the standard size of our advertisements which is 350 pixels width. As a result the right hand portions of the advertisements is hidden.

Is there a way to eliminate this jerky behaviour, which causes a problem with the iPad’s resolution of 1,024 x 768 pixels?

If the content width would smoothly and proportionately be reduced as the browser width was reduced, then the problem wwould disappear. i.e. gradual resizing of content width instead of stepped resizing.

Please advise.

Hey there

Please try this code, lets try to change column widths only for homepage:

@media (min-width: 992px){
.home.blog .col-md-8 {
width: 62%;
}
.home.blog .col-md-4 {
width: 38%;
}
}

Let me know it it worked :slight_smile:

One thing I have noticed is that as the browser width drops below 1200 pixels the content width is immediately pulled in to 992 pixels. This puts a squeeze on the contents of both the main bar and the sidebar.

1) standard settings main bar / sidebar = 66.6 / 33.3 - images in the main bar are reduced proportionately from 750 pixels width to 618 pixels width, whereas the width of images in the sidebar are reduced by cropping from 300 pixels to 276 pixels.

2) your proposal main bar / sidebar = 62 / 38 - images in the main bar are reduced proportionately from 700 pixels width to 570 pixels width, whereas the width of images in the sidebar are reduced by cropping from 300 pixels to 276 pixels.

3) main bar / sidebar = 55 / 45 - images in the main bar are reduced proportionately from 613 pixels width to 505 pixels width, whereas the width of images in the sidebar remains at 300 pixels!

Thus there is a solution by changing the ratio of main bar / sidebar to 55 / 45. But this is not a very good solution because the size of the sidebar is too large in relation to the main bar. The preferred ratio id the default one. i.e. 66.6 / 33.3.

The difference is that the images in the main bar are reduced proportionately whereas the images in the sidebar (javascript advertisements) are not reduced but cut off on the right hand side. A typical javascript advertisement is coded as follows:

<div id="div-gpt-ad-13433538-0" style="width: 300px; height: 250px;"><script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-13433538-0'); });
</script></div>

Could such a javascript advertisement code be modified in order to proportionately downsize the advertisement as the browser window was reduced?

HI there

Im out of idea :frowning: im sorry but this will take us very long from here, because from what i understand you need a something custom and none of the solutions provided us not suits your needs, its impossible to narrow container width and keep elements fixed width inside :slight_smile: my suggestion is to review your ads as well, there is nothing more we can do, this is how template is working and we are trying to do our best to help you, but still its not the case for you, i guess you need more efficient solution, something like custom work, in this case, i hoppe you understand me :frowning:

I guess the problem is caused by the responsive behavior of the theme. On this forum we have read that other users have similar problems and have tried to deactivate the responsive behavior of the theme by deleting the following line of code from the header.php file:

<meta name="viewport" content="width=device-width, initial-scale=1">

We also tried this but unfortunately it didn’t work!

Is there an effective way to deactivate the responsive behavior of the theme?

Good evening @supertrooper

No, this is not for responsive behavior “switcher” :slight_smile: theme uses bootstrap framework for the responsive layout and it can not be disabled by deleting just one line of code.
There is no problem in the theme responsiveness, can you show me an example of this in our demo? users have a problem because when they are implementing third-party codes it affects theme behavior, some of them can be fixed but not everything

Which demo do you mean?

I mean our main demo of sparkling

Sparkling is really a great theme and I want to start install on our website as soon as I have found a fix for this problem. I cannot find an example of the problem I am facing in the Sparkling theme demo because there are no advertisements in the sidebar.

The theme works perfectly and resizes images when placed in an image widget in the sidebar. The problem is when advertisements are placed in a text widget in the sidebar. Because the advertisement code is in javascript (see example above) it cannot be placed in an image widget but has to be placed in a text widget. e.g.

`<div id=“div-gpt-ad-13433538-0” style=“width: 300px; height: 250px;”><script type=‘text/javascript’>
googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-13433538-0’); });
</script></div>

How can we insert advertisements in the sidebar (300 pixels wide), which will be proportionately reduced as the browser width is reduced by the responsive width settings?

Thanks in advance for your help

HI

Yes, i know your problem, honestly, we already trie to help you but none of the provided solutions is not acceptable for, :frowning: im really out of idea how can be this fixed by another way, sorry
Have you tried to use 100% in your advertising code instead of 300px?

I also tried using 100% in the advertising code instead of 300px width.

Unfortunately this didn’t work.

Hi

I’m sorry but you have to change approach, create different size ads or something like that, as we can see solution provided by us is not good enough, we tried our best :frowning:
is there anything else i can do for you?

This is the only issue your team has not been able to resolve.

Thanks for your great support and for a truly outstanding theme.

Best regards to you and your tam.