Responsive portlets

[Abdul Kaleem, geändert vor 10 Jahren.]

Hi all,

i have developed a responsive theme and have kept all the css in theme, which works perfectly fine,
but when i create a portlets, and add it to my page, it is not responsive,

for example
i created a theme with an image in it, that changes as i decrease the size of my browser,
but when i put that image in my custom portlet, its size does not change,
i really cant figure out the problem,

any helping hands are appreciated,
waiting for reply,

thanks in advance,

[Andew Jardine, geändert vor 10 Jahren.]

Hey Abdul,

I am working on something right now that is fully responsive. The trick we used is to move all the container logic (what controls the actual width of the column the portlets go into (into the layouts). The portlets themselves just have the actual content. For example --

<div class="main-content-container inner">
	<div class="row">
		<div class="large-3 medium-3 small-3 column">
			<div class="row">
				<div class="small-12 small-centered medium-12 medium-uncentered large-12 large-uncentered column portlet-column portlet-column-first" id="column-1"> 
					$processor.processColumn("column-1", "portlet-column-content portlet-column-first")
	            </div>
            </div>
		</div>

		<div class="large-9 medium-9 small-9 column">
			<div class="row">
				<div class="large-12 medium-12 small-12 column portlet-column" id="column-2"> 
					$processor.processColumn("column-2", "portlet-column-content")
				</div>
			</div>
		</div>
	</div>
</div>

Each of the portlets itself has a large container tht represents the boundaries of its own content as well, but none all the responsive control is done through the layout containers. This example here is a 2 column (with a left sidebar).

[M. Ahamed Maqbool, geändert vor 10 Jahren.]

Hi Abdul,

If you are working responsive theme try to avoid using pixels for all you elements, Use percentage. If you are using pixels you need to write the css every views like 320,480 and 720.

if you are using img tag your custom portlet add Style ( width:100%) for that elements. if your using background of your div it will work.

Hope this will help you. If not please tell me what kind responsive layout you are using like alloyui,bootstrap or media query and also your custom portlet image tag.

[Abdul Kaleem, geändert vor 10 Jahren.]

Thank You
Maqbool Bhai,

my code was this...
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
after your suggestion i changed the width to 100%;
it worked thank you...

and i was using media query....