Title: css
Last modified: September 25, 2023

---

# css

 *  [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/css-238/)
 * It would be possible, and only for big devices, putting on the same line the 
   title (Marina di Massa 42) and the navigations buttons? these last ones should
   stay more on the right side, above the fourth picture. I dont know if I can do
   all via css or before I should put these 2 elements in the same div
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-238%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Diego F.C.](https://wordpress.org/support/users/diegofc/)
 * (@diegofc)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/css-238/#post-17076894)
 * Hi [@sacconi](https://wordpress.org/support/users/sacconi/)!
 * Yes, it’s possible, it could be something like this:
 *     ```wp-block-code
       @media screen and (min-width: 2000px) {
           .wp-pagenavi {
               padding-top: 35px;
               margin-top: 0.85em;
               text-align: right;
           }
           .navigazione {
               max-width: 50%;
           }
           h1.page-title {
               max-width: 50%;
           }
       }
       ```
   
 * I’ve using here your own HTML5 scaffolding and CSS.
 * Hope it helps or gives you an idea to do it.
 *  Thread Starter [sacconi](https://wordpress.org/support/users/sacconi/)
 * (@sacconi)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/css-238/#post-17077590)
 * Yes, it works, I also added some style, I’d like to have the same results on 
   the search results page such as [https://test.sacconicase.com/?sfid=11126&_sft_category=lignano-sabbiadoro-appartamenti-vacanze&_sfm_function_number=50+1700&_sfm_function_ospiti=2+12&_sfm_function_camere=0+6&_sfm_function_bagni=1+4](https://test.sacconicase.com/?sfid=11126&_sft_category=lignano-sabbiadoro-appartamenti-vacanze&_sfm_function_number=50+1700&_sfm_function_ospiti=2+12&_sfm_function_camere=0+6&_sfm_function_bagni=1+4)
 * Probably I had inside some other css in conflict with these last ones
 *  [jayweiss](https://wordpress.org/support/users/jayweiss/)
 * (@jayweiss)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/css-238/#post-17078133)
 * Yes, it’s possible to align the title “Marina di Massa 42” and the navigation
   buttons on the same line, with the buttons positioned to the right side above
   the fourth picture. You can achieve this using CSS, and you don’t necessarily
   need to put them in the same `div` as long as the parent elements are structured
   correctly.
 * Here’s a general guideline on how to achieve this layout using CSS:
    1. **HTML Structure:** Ensure your HTML structure is set up appropriately. You 
       should have a parent container for these elements and individual containers 
       for the title and navigation buttons. For example:
 *     ```wp-block-code
       <div class="container">
           <div class="title">Marina di Massa 42</div>
           <div class="navigation">
               <!-- Navigation buttons go here -->
           </div>
       </div>
       <div class="images">
           <!-- Images go here -->
       </div>
       ```
   
    2. **CSS:** You can use CSS to style and position these elements as described. 
       Here’s some sample CSS code:
 *     ```wp-block-code
       .container {
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
   
       .title {
           /* Style for the title */
       }
   
       .navigation {
           /* Style for the navigation buttons */
       }
   
       .images {
           /* Style for the images */
       }
       ```
   
 * In this CSS:
    - `display: flex;` makes the container a flex container, allowing you to control
      the positioning of its children.
    - `justify-content: space-between;` pushes the title to the left and the navigation
      buttons to the right, creating the desired layout.
    - `align-items: center;` vertically aligns the title and buttons.
 *  1. **Adjust CSS Styles:** Customize the CSS styles for the title and navigation
       buttons to achieve your desired appearance.
 * By following this structure and using CSS flexbox properties, you can place the
   title and navigation buttons on the same line, with the buttons to the right 
   side above the fourth picture, all without necessarily needing to wrap them in
   the same `div`. However, you may need to adjust styles and fine-tune the layout
   to match your specific design.

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

The topic ‘css’ is closed to new replies.

## Tags

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

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [jayweiss](https://wordpress.org/support/users/jayweiss/)
 * Last activity: [2 years, 8 months ago](https://wordpress.org/support/topic/css-238/#post-17078133)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics