Post by erpee1971 » Sun Jan 01, 2017 6:55 pm

Ben bezig met een responsive theme voor OC.

Ik een container heb ik afbeeldingen geplaatst voor betalingen, links maar FB e.d.
De weergave op de pc is goed.
payment-goed.jpg

payment-goed.jpg (29.67 KiB) Viewed 1144 times

Bekijk ik het op een tablet, ziet het er ineens minder mooi uit....
payment-fout.jpg

payment-fout.jpg (28.25 KiB) Viewed 1144 times

Wat moet ik doen om het op een tablet ook mooi uitgelijnd te krijgen?

Afbeeldingen worden geplaatst met CSS

Code: Select all

.paymentinfo-l{
	float: left;
	margin-right: 6px;
	margin-left: 6px;
}
.paymentinfo-r{
	float: right;
	margin-right: 6px;
	margin-left: 6px;
}
afbeeldingen in template via:

Code: Select all

<div id="content">
	<div class="container">
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/ideal.png" height="25" />
		</div>	
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/paypal.png" height="25" />
		</div>	
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/visa.png" height="25" />
		</div>	
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/mastercard.png" height="25" />
		</div>	
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/MrCash.png" height="25" />
		</div>	
		<div class="paymentinfo-l">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/sofort.png" height="25" />
		</div>
		<div class="paymentinfo-r">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/bestewebwinkels.png" height="25" />
		</div>
		<div class="paymentinfo-r">
			<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/postnl.jpg" height="25" />
		</div>		
		<div class="paymentinfo-r">
			<a href="https://www.facebook.com/Topgadgets4U.nl?ref=hl"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/facebook_logo.png" alt="#" height="25" /></a>
		</div>		
		<div class="paymentinfo-r">
			<a href="https://twitter.com/topgadgets4unl"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/twitter-icon.png" alt="#" height="25" /></a>
		</div>		
	</div>
</div>

Newbie

Posts

Joined
Sun Jan 01, 2017 6:29 pm

Post by tverheijen » Fri Jan 27, 2017 7:16 pm

Je zal hiervoor een viewport moet instellen in je stylesheet (css) voor de tablet.

Active Member

Posts

Joined
Tue Sep 20, 2011 3:19 am
Who is online

Users browsing this forum: No registered users and 94 guests