YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar steve.gower asked

Picture placement and sizing

For the Home Opinion module I pasted part of the HTML code listed and I got the images to show up and switch. Unfortunately the image is to big and not in the same position as the Organic demo.

How to I get the size and placement to match that as shown on the demo?

  • Image Sources
  • UIkit

Edited

3 Answers

0

Avatar michael.maass Support answered

For the Home Opinion module I pasted part of the HTML code listed and I got the images to show up and switch. Unfortunately the image is to big and not in the same position as the Organic demo.
...
I thought the question was rather simple.

It remains unclear which "part of the HTML code" precisely you pasted and which part was omitted.

How do I set the image dimensions and placement of the image on the Home Opinion module. The template demo has the image showing up on the right side of the module. I would like to do the same.

When looking at the Organic demo and the module titled "Home Opionion" in the "main-bottom" I see an image on the left:

Image

Maybe we are looking at different modules? The requested link to your site could have provided important information and have given a clue. Entirely your decision, of course. But until then I am left to guessing.

I would like to do the same.

To get the same result, try and use the same markup. Here is the original HTML from the demo:

<div class="uk-grid tm-grid-gutter-remove" data-uk-grid-match>  

<div class="uk-width-small-1-3 uk-position-relative tm-overflow-hidden">  
  <ul id="tm-home-opinion-image" class="uk-switcher uk-margin" style="min-height: 308px;">  
        <li class="tm-background-image">  
          <div style="background-image: url('images/yootheme/demo/default/home_people_sarah.jpg');"></div>  
        </li>  
        <li class="tm-background-image">  
          <div style="background-image: url('images/yootheme/demo/default/home_people_julia.jpg');"></div>  
        </li>  
        <li class="tm-background-image">  
          <div style="background-image: url('images/yootheme/demo/default/home_people_lily.jpg');"></div>  
        </li>  
    </ul>  

</div>  
<div class="uk-width-small-2-3 uk-position-relative">  
    <div class="uk-panel uk-panel-space uk-text-center uk-margin-large-bottom">  
              <h3 class="uk-panel-title">  
                What you think  
              </h3>  
   <ul id="tm-home-opinion" class="uk-switcher uk-margin">  
        <li class="uk-animation-fade">  
              <blockquote class="uk-margin-large-top">  
                <p>" It was a great experience. My husband and I enjoy spending time relaxing together.<br>We will definitely come back. “</p>  
              </blockquote>  
        </li>  
        <li class="uk-animation-fade">  
              <blockquote class="uk-margin-large-top">  
                <p>" It was the first time for me to spend time in a spa, but definitely not the last time. I'm loving it! “</p>  
              </blockquote>  
        </li>  
        <li class="uk-animation-fade">  
              <blockquote class="uk-margin-large-top">  
                <p>" This was not the first time for me here. But I enjoy every minute I'm here. “</p>  
              </blockquote>  
        </li>  
    </ul>  
    </div>  
    <ul class="uk-tab uk-tab-grid uk-grid-width-1-3 uk-tab-bottom tm-tab-align-bottom" data-uk-tab="{connect:'#tm-home-opinion, #tm-home-opinion-image '}">  
        <li><a href="">Sarah</a></li>  
        <li><a href="">Julia</a></li>  
        <li><a href="">Lily</a></li>  
    </ul>  
</div>  
</div>  

Thank you

Edited

0

Avatar michael.maass Support answered

When asking for assistance of any kind please generally post a link to your site and — where applicable — a page showing the subject of your question. A first hand look at the page could possibly tell us more about several aspects regarding current settings, which style you use, the markup in its context, as well as other details which are probably important when it comes to explanations, instructions or troubleshooting.

A look at the actual page will also reveal which CMS you use (Joomla or WordPress).

Without providing sufficient information you will rarely get a spot-on answer because everybody is left to guessing what might be wrong and how to approach your issue.

If you don't want to openly post the URL or it is set "Offline" (Joomla) or otherwise locked (via .htaccess/.htpasswd for instance) just click Edit at the bottom right of your initial question (= the first post in this thread) and then use Add hidden information at the bottom left to provide the required access data.

Anything in the Hidden Information field will only be visible to the YOOtheme support team.

Once there is a page to inspect I will take a look to see what I can suggest.

Thank you

0

Avatar steve.gower answered

I am using g joomla 3.7 with the Yootheme Organic template.

I thought the question was rather simple. How do I set the image dimensions and placement of the image on the Home Opinion module. The template demo has the image showing up on the right side of the module. I would like to do the same.

The module is currently unpublished as it is not working right.

Edited

Know someone who can answer? Share a link to this question via email or twitter.