function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How to keep a component without alignment issues , for all resolutions?

Hi all,

i've a compoent and i've used that like this

<c:Country_Only_Component countryLabel="Country of Incorporation" Country="{!Vendor_Registration__c.Country_of_Incorporation__c}" EditMode="true" CountryLabelStyle="color: #4a4a56;font-weight:bold;font-size:11px;margin-left:3%;margin-right:1%" StateLabelStyle="color: #4a4a56;font-weight:bold;font-size:11px;margin-right:20px;margin-left:280px;" CountryCMBStyle="width:152px;" StatesCMBStyle="width:152px;" ></c:Country_Only_Component>

Issue is it looks fine for 1366*768 but for big monitors it doesn't look fine.. Has some allignment issues.

Please, can anyone give me some tips?

I used margin-left : 10% (with percentage too) , but doesn't work for me
James LoghryJames Loghry
Might be a bit of overkill, but have you looked into bootstrap?  Bootstrap is "responsive".  This means you can specifiy different layouts for different browsers and resolutions, including mobile layouts and different resolutions.  Beware though, that bootstrap involves adding a lot of css and some javascript to your project.
James LoghryJames Loghry
Also, see this post on the developer blogs on how to get started with VF and bootstrap: