How to I set widgets to shrink with browser resize?

Hi, I would like to set some of my widgets that I have overlaid on my image slider on my home page to shrink/expand in size as I resize my browser window. Can this be done?

ref: http://drshawnadarou.com/

Hi,

I'm not sure what do you want to achieve, could you provide some screenshot? which widgets exactly do you want to resize and when? you can use tablet.css and mobile.css with widget's id, but I need more details.

hard to do a screen shot since what I'm talking about happens on an iPhone but this is what I'm talking about: do you notice that when you resize your browser page that the image slider and other elements on the page shrink and expand according to the browser window? It seems that some of the objects in your theme are set to resize and some are not. For example your "search" widget at the top of the page does not resize with browser size but table width does. Does that help?? Try it with my site below.

ref: http://drshawnadarou.com/

Now I understand, our search widget is ok Check http://demo.gavick.com/wordpress/storebox/.
Your search widget is positioned absolutely, that's why it's not resized.

Try to add e.g. this to mobile.css:

Code: Select all

#search-2 {
top: 60px;
left: 10px;
}

customize top and left values, and you can use another values on tablet.css

so all I have to do is delete the "absolute" argument??

I tried this with different values but the search widget did not move. In my case it seems that the values have no effect. Any fix??

No, you should leave position: aboslute in override.css file, and into mobile.css paste my mentioned code. If you started with abolute positioned search on desktop, use another top and left properties to position widget only for mobile devices.

so do I have to have 2 of the same widget, one for desktop and one for mobile and target them differently in override.css and mobile.css??

i tried your suggestion and on the iphone and the "search" widget displayed to the far right on another empty page. Not sure what happened there. Deleted the code from the mobile.css but wasn't able to return the search box to it's original position. Is the iphone safari browser just not refreshing properly??

No, it's ok you should have one search widget, but the same widget can look differerent, depends on device, so it may be different position on tablet and different on mobile, so you can use differenr top, left rules in tablet.css file and different in mobile.css (but the same #search-2 selector).

I'm sorry, but I can't do everything for you, if you want to do such modifications, you should have basic knowledge about Responsive Web Design and CSS.

Now you have this code in override.css file:

Code: Select all

#search-2 {
position: absolute;
top: 40px;
left: 420px;
}

which causes "search" widget displaying to the far right on another empty page.

ok. I think I got it. Thanks