Twentysixteen child theme help with image alignment

  • Hi.

    My first post, so I hope I found the right place. Appologies if I didn’t.

    I’m new to WP so have been on a very step learning curve over the last 6 weeks, but I hope I’m slowly making sense of it all.

    I am developing a new look to the main ‘.com’ site using the ‘uk’ so i can make my mistakes in private before going public.

    Most of the pages will follow the same layout as the page above. It uses example images of the variuos card designs and by nature the image shapes vary around 4 basic sizes.

    The page looks fine on a pc screen and via iPad, but not so good when using my phone (android, but presume Iphone will be the same). The first images which are 300×298, display nicely above the text, but as you scroll down to those 210×300 and 112×300 some of the text starts to wrap on the left.

    My thoughts are to add left padding to the image by unsure how to achieve this.

    an example of the code I’m using (without the ! obviuosly)

    <!h3>Peeping Toms<!a href=”https://www.handmadecardsandgifts.uk/wp-content/uploads/2017/10/tall-cat-card.jpg”>&lt;!img class=”alignright size-medium wp-image-552″ src=”https://www.handmadecardsandgifts.uk/wp-content/uploads/2017/10/tall-cat-card-112×300.jpg&#8221; alt=”” width=”112″ height=”300″ /><!/a><!/h3>
    <!p class=”inner”>This long tall card features 7 curious cats, one of which is 3D.<!/p>
    <!p class=”inner”>Card size is 80 x 197 mm<!/p>
    <!p class=”inner”>￡2.00<!/p>
    <!p class=”inner”>[!wp_cart_button name=”Peeping Toms” price=”￡2.00″]

    All help and suggestions appreciated.

    Steve

    • This topic was modified 7 years, 4 months ago by paperman2.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter paperman2

    (@paperman2)

    I’ve solved the problem for now by applying different amounts of padding according to how wide the image is.

    However if anyone can suggest a better way?

    .alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}
.alignright2 {
	float: right;
	margin: 0.375em 0 1.75em 3.5em;
}
.alignright3 {
	float: right;
	margin: 0.75em 0 1.75em 4.0em;
}

    Regards

    Steve

Viewing 1 replies (of 1 total)
  • The topic ‘Twentysixteen child theme help with image alignment’ is closed to new replies.