Title: layout problems
Last modified: December 2, 2024

---

# layout problems

 *  Resolved [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/)
 * I cant undestand why filtering only by n of people produces single posts without
   any limit in the bottom border such as [https://sacconicase.com/?cat=0&tipologia=0&function_ospiti=11&function_camere=&function_bagni=&function_number=&search=Cerca](https://sacconicase.com/?cat=0&tipologia=0&function_ospiti=11&function_camere=&function_bagni=&function_number=&search=Cerca)
 * instead using more filters leads to this result: [https://sacconicase.com/?cat=286&tipologia=villa-a-schiera&function_ospiti=10&function_camere=6&function_bagni=&function_number=&search=Cerca](https://sacconicase.com/?cat=286&tipologia=villa-a-schiera&function_ospiti=10&function_camere=6&function_bagni=&function_number=&search=Cerca)
 * with 1 post too but with the right dimension also in the bottom border
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Flayout-problems-22%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18174396)
 * I recommend getting in touch with WooCommerce’s support about this via [https://woocommerce.com/my-account/contact-support/](https://woocommerce.com/my-account/contact-support/)
   if you have any of their paid WooCommerce products or [https://wordpress.org/support/plugin/woocommerce/](https://wordpress.org/support/plugin/woocommerce/)
   if you do not.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18174436)
 * I dont have wooCommerce
 *  Moderator [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18174479)
 * Ah, ok.
 * What plugin are you using to manage the products and filter system?
 * WordPress doesn’t have filtering or eCommerce functionality built-in.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18174653)
 * it’s all custom
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18176841)
 * You have a syntax error in this rule:
 *     ```
       @media only screen and (min-width: 769px){.home #primary {
         display: grid;
         gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(323px, 1fr)); 
       	padding-right:10px;
       	grid-template-rows: grid-template-rows: repeat(3, minmax(450px, 1fr));
       }
       ```
   
 * `grid-template-rows:` occurs twice for the same rule, remove one of them.
    I’m
   unsure where its source is, but it occurs at line 507 of the page’s source HTML.
   I think it might be originally somewhere in Additional CSS?
 * Correcting the syntax ought to correct the row height problem you are seeing.
   You may need to flush your browser’s cache to see the effect of the change.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18176906)
 * perfect!
 * By the way, I have about 1600 lines of css in the customizer, I think it’s time
   to transfer them to a .css file and put them on the server, what is the most 
   rational procedure?
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18179290)
 * You can copy/paste move the entire Additional CSS content to your theme’s style.
   css. Or instead, move it to a new .css file and add a `@import` line to style.
   css to cause it to be loaded. [Some examples here](https://www.w3schools.com/cssref/atrule_import.php).
   The examples use relative file references. We shouldn’t use relative URLs in 
   WP though. Use something like `get_stylesheet_uri()` to build a full absolute
   URL.
 * There’s a chance certain rules may lose their precedence after being moved. You
   may need to move individual problem rules back to Additional CSS.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18179420)
 * using style.css causes less problems than creating a new .css file? I thought
   maybe it is better to move the rules little by little, not all at the same time
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18180280)
 * this css is now unclear to me:
 *     ```wp-block-code
       .wp-call-button-in-btn {  display: none;}
       ```
   
 * I seem to notice that the more css rules I put in the style.css file the slower
   it is to load, so even the right typefaces can be loaded with a bit of a delay.
   Maybe there is a way to load one rule faster than others? Like the image preload
   I already used once
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18181521)
 * That CSS hides whatever button has the .wp-call-button-in-btn class attribute.
   Sometimes buttons are initially hidden, then exposed by script once certain criteria
   is met. Or the button is not needed at all and hiding it was the easiest way 
   to get rid of it.
 * Yes, larger files take longer to load, but CSS files are not typically all that
   large compared to image files. Depending on your server configuration, it’s conceivable
   that Additional CSS would load faster than the same in a .css file. One comes
   from the DB, the other of course is a text file. If one had a very large DB, 
   loading a text file may be faster.
 * 100 KB of CSS is 100 KB of data regardless of where it comes from. The page has
   to load it one way or another. It’s infeasible to preload CSS because the order
   in which it loads impacts precedence. Preloaded CSS is more likely to be overridden
   by conflicting rules.
 * If you haven’t already done so consider a plugin that optimizes CSS and JS code
   to reduce its volume so it loads faster. Some caching plugins have an optimization
   feature. There are also stand alone plugins such as “Autoptimize”. Caching is
   probably the best way to speed up CSS and JS loading. The same data can be reused
   on multiple pages without the need to reload everything.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18182912)
 * ok. Maybe it’s better if I do nothing. But it’s not very easy to look for a rule
   in the customizer if you have 1600 lines. I’ll ask the server manager
 * Another question. How can I center-align the div containing the booking form?
   [https://test.sacconicase.com/hotels/](https://test.sacconicase.com/hotels/)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18183439)
 * Usually `margin: 0 auto;` centers things, but it’s not working here.
 * This could work for some screen sizes:
 *     ```
       .bookingaff iframe {
           margin-left: calc((100% - 770px) / 2);
       }
       ```
   
 * There will need to be media query variants for any screen sizes it doesn’t work
   for.
 * You’re rolling multiple topics into one thread here. While I’m happy to help,
   please start new topics once in a while so others have an opportunity to help
   as well 😉

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘layout problems’ is closed to new replies.

## Tags

 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 12 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [1 year, 6 months ago](https://wordpress.org/support/topic/layout-problems-22/#post-18183439)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics