First Gallery on a page not correctly responsive

  • Please take a look at https://www.horizonvillage.net/accommodation/
    I have several galleries on that page and am also using Gallery Carousel plugin. (This problem happens with or without the plugin so not related) However when changing the window size (try downsizing the window) the first gallery on the page is not responsive in the same way as the other galleries below it. I have tried removing the offending gallery and even copying and pasting other galleries but still we have the same problem. Its always the first

    I have it set to four columns but its not always staying at four columns. Please also have a look at https://www.horizonvillage.net/garden-and-activities/

    Does anyone have any thoughts?

    Thanks in advance.

    Here is the first part of the code for the page:

    <p style="text-align: center;">Horizon Village offers four distinctive hotel complexes available for guests. All rooms incorporate Thai design and architecture in order to invite guests into the luxurious beauty of Thai culture. Standard rooms are loft style rooms with a modern Lanna look. Superior rooms are villa style with contemporary Thai feel. Deluxe rooms are stylized with modern Northern Thai decor. Finally, the eminent Suite, having housed high-profile guests such as Former US President Jimmy Carter, is elaborately furnished with traditional Thai decor.</p>
<p style="text-align: center;"><strong>Room prices vary depending on the season. Our high season here at Horizon Village runs from 1 November to 30 April each year followed by our low season from 1 May to 31 October. Rates quoted on this page are for direct internet booking only. Prices include 10% service charge and VAT.</strong></p>
[divider]
<p style="text-align: center;"><span style="text-decoration: underline; color: #000000;"><strong>Standard Rooms?</strong></span></p>
<p style="text-align: center;">Standard rooms are loft style rooms with a modern Lanna look. There is no bathtub included.</p>
[gallery columns="4" size="medium" ids="1572,1573,1574,1575"]

[divider]
<p style="text-align: center;"><span style="text-decoration: underline;"><strong>Superior Rooms?</strong></span></p>
<p style="text-align: center;">Superior rooms are villa style with contemporary Thai feel and come complete with a bathtub.</p>
[gallery columns="4" size="medium" ids="1002,1003,1001,1105"]

[divider]
<p style="text-align: center;"><span style="text-decoration: underline;"><strong>Deluxe Rooms</strong></span></p>
<p style="text-align: center;">Deluxe rooms are stylized with modern Northern Thai decor and overlook one of our picturesque lakes.</p>
[gallery columns="4" size="medium" ids="1013,1014,1015,1113,1116,1114,1115,1117"]
Viewing 15 replies - 1 through 15 (of 24 total)

  • Hi, nice site. I don’t think there is anything wrong with your first gallery. I think your logo is in the way forcing it to act differently. As a test move your logo way up or delete it temporarily. I think you will find that the gallery will begin to act right.

    Thread Starter StuCorlett

    (@stucorlett)

    Thanks wslade. How would I force the logo to stay only on the top banner? Any ideas?

    Thread Starter StuCorlett

    (@stucorlett)

    Here’s the logo code in the header.php file

    <!-- MAIN LOGO -->
							<a href="<?php echo home_url(); ?>"><img src="<?php if ( isset( $logoUrl['background-image'] ) ) echo $logoUrl['background-image']; ?>" id="main-logo" /><img src="<?php if ( isset( $smallLogoUrl['background-image'] ) ) echo $smallLogoUrl['background-image']; ?>" id="main-logo-min" /></a>
						</div>
					<div id="top-sticky-bar" class="container">
						<div id="sticky-top-bar">
							<div id="top-contact-wrap">

                                                      <div class="thirteen columns" id="top-menu-others">

    I did make it work earlier but somehow I fooled myself. It can’t be the logo but there is something above the first gallery that I changed and it starting working as it should.

    I just need to recreate what I did. ??

    Thread Starter StuCorlett

    (@stucorlett)

    Thanks for your help on this man!

    I’m happy to help. Have you noticed that the logo gets bigger exactly when the first gallery breaks?

    Thread Starter StuCorlett

    (@stucorlett)

    Yes. You are right! Hadn’t noticed that. There is an option in the template options for two logos one larger sized for Retina screens. I will try disabling the larger one and see what happens….

    Retina should be 2X as big but try anything that you can think of…

    Thread Starter StuCorlett

    (@stucorlett)

    Have removed the logo completely and its still happening. I wonder if it something in the responsiveness code…. Any idea where I might find that?

    the gallery is built to be responsive there is something above or around the first one causing it to break. I modded the spammer but I appreciated his support.

    Thread Starter StuCorlett

    (@stucorlett)

    lol

    Yeah LOL, sorry, deleted that – he was spamming a bunch of forums…in the guise of being helpful.

    But the galleries seem to be working the same for me in Firefox…

    Thread Starter StuCorlett

    (@stucorlett)

    So, I set up a new subdomain and loaded the theme and then installed a gallery.

    On this page there is no problem, so its clearly got to do with something else thats been done.

    https://nationtest.top30hotels.com/?page_id=7

    This CSS is the culprit:

    #gallery-1 .gallery-item {
    min-width: 250px;
}

    Thread Starter StuCorlett

    (@stucorlett)

    WPyogi
    Thanks so much!
    What should I change it to?

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘First Gallery on a page not correctly responsive’ is closed to new replies.