Align image right in column with centered text

Support
#1

Hello. I am testing dev1.thumbprintbooks.ca/family-stories for responsive design, and noticed that on large screens (e.g. iMac 27"), I would like to align two images to the right of the column, but need the text within the columns to be centered (i.e., the image for Photographs, and the image for Family Tree). I tried setting right alignment for the column, then centered the alignment for the text elements, but the column alignment overrides the text alignment.

Is there a way to align an image with “auto” width to the right of the column?

If not, is there a way to restrict the overall displayed width of a PAGE to 1920px on screens wider than 1920 px? I’m using XPro. In Theme-Options-Layout and Design I have the following settings:
Site Layout: Fullwidth
Site Max Width (Px): 1200
Site Width (%): 88
Content Layout: Fullwidth

Thanks for your help.

#2

Hi There,

Thanks for writing in!

If you are using page template as no container header | footer, please change it to container Header | Footer and in theme option change the max-width to 1920Px,

Let us know how this work.

Thanks

#3

That works. However, now I have a blank area between the header and the first element on the page. And a blank area at the bottom of the page between the last element (gold bar) and the footer. I don’t know how to get rid of those blank areas.

If there is a way to align an image with “auto” width to the right of a column with centered text, I’d prefer that solution.

#4

Hello There,

Thanks for updating in!

1.) The space above the gold bar line is coming from the bottom padding of the section before the section containing the gold line. Removing the bottom padding will remove the space. The space below the gold line can be removed by using this custom css

.page-template-template-blank-1 .x-container>.offset {
    margin-bottom: 0;
}

2.) If there is a way to align an image with “auto” width to the right of a column with centered text, I’d prefer that solution.

  • Please click the column and align its contents to the right. Since below the image is a text element, you will have to align the text elements as center within the Text element settings so that the text will follow its own alignment and not from the column settings.

Hope this helps.

#5

Thank you. I realized that I had put centering on the row, which seemed to override the column right alignment. Once I took off the row centering, things are working fine. Thanks again for your help!

#6

You’re welcome!
We’re glad we were able to help you out.

#7

Re: the problem with display on screens wider than 1920px, I found a better solution at https://theme.co/apex/forum/t/contain-page-width-for-wide-screen/23016 — in Theme Options->Layout and Design, I changed Site Max Width to 1920 px, and site width to 100%. Then I added the following CSS to Global CSS based on the information in the link above:

.x-main.full {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}

I didn’t need to change the page template from Blank - No Container | Header, Footer which I have used throughout the site.

#8

Thanks for sharing your solution!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.