How to Change Responsive Width Behavior

As the browser window is reduced below 1200 pixels, the width of the main content area and the sidebar are reduced in one step to an overall width of 992 pixels.

Then as the browser window is reduced below 992 pixels, the sidebar is removed and re-positioned below the main content area.

Finally as the browser window is reduced below 767 pixels, the size of all images is reduced proportionately.

What I would like to is to eliminate the two types of behavior a) reduced in one step and b) the sidebar is removed and re-positioned and replace it with the size of all images is reduced proportionately.. i.e. gradual proportionate size reduction rather than stepwise reduction.

What code can be added to the style.css to achieve this “gradual” responsive behavior?


We’re using the Bootstrap frameworks grid layout, and this is the default working of the grid, I am afraid it is not override easily, to do so, we need to edit a lot of code edits. Sorry!

Let us know if you have any other questions,


Hi Laranz

I realize it is not easy but you must admit it is possible. Please let me know which code edits will be necessary, and I can do it myself… Thanks in advance for your help.

Hey there

@supertrooper this is not about “which code edits” this is a complex question and several files must be changed same time, alternatively, if you can edit and work with codes editing files is not necessary, you can add your new CSS rules in the appearance > customize > additional CSS and new rules will override rules defined in the files :slight_smile:

Hi Noda

Our website is optimized for a width of 1,200 pixels but with the Sparkling theme as it is now, the layout is completely screwed up on tablets such as the iPad which have a screen resolution of 1,024 pixels.

Therefore our objective is that the width of all content and images should be reduced gradually and proportionately between 1,200 pixels and 992 pixels instead of in one step as the Sparkling theme is now.

What code should be added to the style.css file in the child theme to achieve this objective?

Hoping with your knowledge and experience you will be able to help us on this one.

Dear @supertrooper I’m really confused and it’s very hard for me to give you negative answers but you should understand us too, we are doing our best to help our customers even in the case when the question is outside of our support policies, but this case is different it needs complex work and its not possible to handle such question under free support scope, if this problem is very important you must hire someone who can make adjustment, i hope you understand us