Okay
  Public Ticket #2232212
how to Add space to side of images?
Closed

Comments

  •  3
    Felicia started the conversation

    Hello, i submitted a photo of my website. I am trying to add two images next to each other (the infographic you can see). I want them to be centered on the website and not to the left as the image now shows. How do i do this? do i need to add spaces on the sides? if yes how do I do that? Or how would you guys solve the issue?

    Attached files:  Screenshot 2019-12-02 at 21.30.55.png

  •  550
    Gabriel replied

    Hi Felicia, all you need to do is set "text center" to the column holding the image. Not the image element, but the column. Take a look at this:

    7811513266.gif


  •  3
    Felicia replied

    Thank you so much for the quick reply!

    Have a nice day :)

  •  3
    Felicia replied

    Hello again I have another question. How do I get these two pictures to appear as boxes on the page? Check photos below

    Attached files:  Screenshot 2019-12-03 at 19.30.36.png
      Screenshot 2019-12-03 at 19.30.46.png

  •  550
    Gabriel replied

    Hi, for each column (the ones you already set text-center), set "boxed" and also add "white-wrapper" to css:

    4475061877.png

    You will also need to add this to Theme Options - Customizations - CSS Global, to get rid of the background:

    [class*="col-md-"].boxed {
        background-color: transparent;
    }
  •  3
    Felicia replied

    Thank you so much!

  •  3
    Felicia replied

    Hello again. When updating the slide for the theme it looks good on computer but the picture is very cut when looking on the phone. How do i fix so the robot is shown on the phones screen as it does on the website in the computer?


    Attached files:  Screenshot 2019-12-04 at 17.17.51.png
      IMG_6436.PNG

  •  550
    Gabriel replied

    This is the normal behaviour for backgrounds. Images are set to "cover", meaning it will fill the container no matter the screen size. Since your image has the robot on the right side, you only see the middle of the image on mobile. Luckily, there's a quick adjustment for this. Add the following code to Theme Options - Customizations - CSS Global:

    #section_5ZtkF {
        background-position: right top !important;
    }


  •  3
    Felicia replied

    Thank you so much. Btw how do I change the hoover color on the button on slide? It only seems to change on the rest of the buttons. And also how do i make our logo bigger on the phone than on the computer version? Also is it possible to have different image as a slider for desktop and mobile users?


  •  550
    Gabriel replied

    1. Hover color can be changed in Theme Options - Main Settings. You're using transparency, that's why it looks different on the hero.

    2. To make the logo bigger, at this to Theme Options - Customizations - CSS Global:

    @media (max-width: 992px) {
    .navbar-brand img {
        max-height: 50px !important;
        margin-top: 5px !important;
    }
    }

    3. To use a different image on mobile, add this code, and change the image url. Remove the code with background position I sent yesterday.

    @media (max-width: 992px) {
    #section_5ztkF {
        background-image: url(https://looplabz.com/wp-content/uploads/2019/12/lull.png);
    }
    }
    
  •  3
    Felicia replied

    Hello again. I have a question, how do i see which image size I should create my pictures in to get the best possible resolution? As you can see in the attachment below I have two pictures with pretty bad quality on this page. I would like to have three smaller images in better quality next to each other, how should I do that?

    Thanks!

  •  3
    Felicia replied

    attachment for the most recent question:


    Attached files:  Screenshot 2019-12-18 at 19.20.51.png

  •  550
    Gabriel replied

    Hi Felicia, there's a simple way of figuring out the best resolution:

    Use inspect element to get the container size:

    8663181670.png

    This would be the maximum size the image will get on a large device. 

    For optimal results, I recommend you use double the container size. This will look good on retina devices too. So in your case, best size would be 740 px wide.

    Right now you're using a smaller than container image size, that's why it looks blurry:

    2317721151.png