Architecture Portfolio Template

Support
#1

Hi,

How do I adjust the image and button to align center as the 2nd image in this page

https://bequote.us/2018/03/30/23-thoughtful-mothers-day-quotes/#themeco

thank you,
John

#2

Hi John,

You need to click text align center on the COLUMN where you have the elements placed.

Hope it helps

#3

Hi, Please ignore the previous question. I would like to know to to stretch the Image and Button in mobile mode?
thanks

#4

Hi There,

Please add this to your ROW’s Element CSS

@media (max-width: 767px) {
	$el.x-container {
		width: 100%;
		max-width: none;
	}
}

Hope it helps,
Cheers!

#5

Hi - it doesn’t seem to work - i noticed the 2 row image and button always stretch correctly. anything before and after 2nd row doesn’t align correctly.

Thank you in advance.

John

#6

Hello John,

Sorry if the code did not work out for you. At the moment, the default display of how the rows and column is displayed were having a conflict with your own custom css

.e522-10 .architecture-portfolio-eastern-works-row{
  display:flex;flex-flow:row nowrap;align-items:stretch;
}

.e522-10 .architecture-portfolio-eastern-works-row:nth-child(3){
  justify-content:flex-start;
}

.e522-10 .architecture-portfolio-eastern-works-row:nth-child(4){
  justify-content:center;
}

.e522-10 .architecture-portfolio-eastern-works-row:nth-child(5){
  justify-content:flex-end;
}

.e522-10 .architecture-portfolio-eastern-works-row .x-column{
  flex:0 1 600px;float:none;width:auto;margin:0;
}

@media (max-width: 767px) {
  .x-container.max.width.offset {
    width: 100%;
  }
}

Are you trying to display the rows, columns, image and texts like this?

If this is not the case, please provide us a mock layout or a screenshot of how you want to display the page so that we will have a reference to resolve the issue.

Thank you in advance.

#7

yes i am - but i also want to narrow the left and right margin a little bit

#8

Hi There,

To make your images and button stretch on mobile, please also add this custom CSS:

@media (max-width: 767px){
    .architecture-portfolio-eastern-works-row .x-column {
        width: 100% !important;
    }
}

Let us know if this code works for you.

#9

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