WHAT ELSE DO WE PROVIDE? section of home page


#1

Hello.

I was wondering if you could tell me how to center the right side image, so that when it stacks, the image that falls below the circles and text is centered.

http://creativew.com/theme

Thanks.
Esteban


#2

Hi,

Did you mean that you want it displaying like this http://prntscr.com/9t9lt8?
If so, please try the css code below:

@media (max-width: 780px){
  div#pgc-8-1-0 .widget-title {
    margin-bottom: 289px;
  }

  div#pgc-8-1-1 {
    position: absolute;
    top: 185px;
  }
}

#3

Sorry. Not like that. I have attached 2 screen shots.

  1. I would like the image to be centered vertically in that space - image move down. http://creativew.com/access/sydney/3.png

  2. I would like have the image centered horizontally in that space - image moved over the the right. http://creativew.com/access/sydney/4.png

Thanks so much.


#4

Oh I see…

Is it happened when the page is displayed in tablet? I’ve try to open your site in desktop and it looks fine, but not when displayed in tablet.

To move the image, you can adjust the value of padding from the code below:

@media only screen and (max-width: 1024px and max-height: 768px){
  div#pgc-8-1-1 {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1024px){
  div#pgc-8-1-1 img {
    padding-left: 30px;
  }
}

#5

Hi Awan.
I’m sorry the code does not work. I injected your code into my style.css. (You can find this code at the very bottom of this .css file). I then tweaked the code in my web inspector, which I am comfortable using. I found that changing the second piece of code did align the image eon my iPhone but had “bad affects” on the different break points on my desktop and iPad.

Could you please try again. Thanks you.
Esteban


#6

My mistakes, the css media query in invalid. Please try following css code:

@media only screen and (max-width: 1024px), screen and (max-height: 780px){
  div#pgc-8-1-1 {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 425px), screen and (max-height: 750px){
  div#pgc-8-1-1 img {
    padding-left: 30px;
  }
}