Pictures over the edge

Support Area Forums Bottega Pictures over the edge

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://www.pokos.at
  • Author
    Posts
  • #21925
    Wolfgang Gschaider
    Participant

    Hi,
    I have a problem with a few pics I added to the content area.
    If I open the page in chrome, everything is in its place – but when it comes to firefox or ie, the pictures occur much bigger and reach out over the edge…

    It’s this landing-page:
    http://www.pokos.at/sundaes_hausgemacht/

    Everything else works very well and my client is really happy with the theme – great work!

    I would be really, really happy if you could help me with my problem:-)

    I have added the two different screenshots…

    Thank you very much!

    Best regards,

    Wolfgang Gschaider

    #21929
    Bill Robbins
    Moderator

    Good Morning Wolfgang,

    Thank you for your business first of all. Sorry for the trouble there. It looks like the images there are added via a table, which is fine. Some browsers handle that just a bit differently from one another.

    You might have better luck using a div for that. Here’s what it could look like:

    
    <div class="quick-gallery">
    
    	<a href="http://www.pokos.at/wp-content/uploads/2014/08/sundae_2.jpg"><img class="size-full wp-image-537" src="http://www.pokos.at/wp-content/uploads/2014/08/sundae_2.jpg" alt="sundae_2" width="300" height="300" /></a>
    
    	<a href="http://www.pokos.at/wp-content/uploads/2014/08/sundae_3.jpg"><img class="size-full wp-image-538" src="http://www.pokos.at/wp-content/uploads/2014/08/sundae_3.jpg" alt="sundae_3" width="300" height="300" /></a>
    
    	<img class="size-full wp-image-536" src="http://www.pokos.at/wp-content/uploads/2014/08/sundae_11.jpg" alt="sundae_1" width="300" height="300" />
    
    </div>
    

    For each image, when you insert it, choose the “none” option for the alignment. Next we’ll need to add a bit of CSS to match the styling of the table. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .quick-gallery {
      	text-align: center;
      	padding-top: 10px;
      	margin-bottom: 30px;
      	max-width: 600px;
      	margin-left: auto;
      	margin-right: auto;
      	border-top: 1px solid #DDDDDD;
      }
      
      .quick-gallery img {
      	display: inline-block;
      	width: 30%;
      	margin-left: 1%;
      	margin-right: 1%;
      }
      
    3. Update your settings.

    See how that works for you. Let me know if you have any questions or trouble.

    Thanks,
    Bill

    #22105
    Wolfgang Gschaider
    Participant

    Hi Bill,

    thank you very much for the quick support – perfect!
    It took me a while, but now it works:-)

    I am looking forward to install the Elite Theme 🙂

    Best regards,

    Wolfgang

    #22107
    Bill Robbins
    Moderator

    Fantastic. If you need anything else, just let me know.

    Take care,
    Bill

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Pictures over the edge’ is closed to new replies.