2 columns (1 with image) not side by side

Hi Sara,

Can you provide a link to the live site where this issue is occurring? I can then help you get sorted.

Thanks,
Nick

• This reply was modified 7 years, 8 months ago by Nick Diego.

Hi Nick,

That was a quick response! Thank you. I am only just setting up the page – weddings.trueshotphotography.ie/weddings/?preview_id=25&preview_nonce=15092f8e68&_thumbnail_id=-1&preview=true

Sara

Hi Sara,

You will need to add the following to your CSS editor for the .custom-class-first class:

box-sizing: border-box;

When calculating the width of the column, the browser is currently counting the padding as well. The setting above excludes padding in the calculation.

That should do the trick for you.

Nick

Hi Nick,

Thank you so much, that worked. And I appreciate the quick response.

Thanks again

Sara

You are most welcome, reviews are appreciated ??

Hi Nick,

Could you help me with the following: I have set up the webpage on desktop (weddings.trueshotphotography.ie/wedding-reviews/) and it all looks great except when viewed on mobile devices ie smaller screens. I had to insert some padding as the page template is 100% width, this padding is not needed when viewing on mobile devices. I’m assuming some css code would eliminate the padding when viewed on mobile devices but any code I have inserted is not working. The css I have is:

/* Wedding reviews */
.review-text-left-class-first{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 100px;
box-sizing: border-box;
}
.review-image-right-class{
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 30px;
box-sizing: border-box;
}
.review-image-left-class-first{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 100px;
box-sizing: border-box;
}
.review-text-right-class{
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 30px;
box-sizing: border-box;
}

Also is it possible to arrange the order of each column when viewed on mobile devices. If possible I would love to have the text and then the relevant image to follow but this doesn’t happen automatically because I have set up the image and text to alternate. In case I’m not explaining properly this is an example of a page that I’m trying to achieve – https://www.studioimpressions.com.au/brisbane-wedding-photographer/ and scroll down to Brisbane Cathedrals and Churches.

I appreciate any help you could give.

Thanks

Sara

Hi Sara,

For mobile specific styles, you need to make use of your theme’s media queries. In your stylesheet, you should fine something similar below:

@media only screen and (max-width: 1024px) {
    ...YOUR CODE HERE...
}

This will only trigger the CSS you add when the browser window is below 1024px wide.

For the alternating order, again this can be done with CSS. Instead of offsetting the images (i.e. switching the order of the columns manually), I would have every block have the image in the second column. Then if you want it to display on the left on a desktop, add float:right to that column. Then on mobile, they will all have the same order.

Give that a try and I hope it’s helpful.

Best,
Nick

Hi Nick, thanks for the advice. I will try the ‘float:right’ and let you know how I get on.

Thanks again

Sara