• I see many topics in this forum but i dont find solution.
    I add /espacio antes barras menu*/
    #header-widget-area {
    width: auto;
    float: right;
    margin-top: 1em;
    }
    #Content {
    width: 100%;
    padding-top: 0px;
    }
    …………………………
    BUT IS NOT ENOUGH
    I reduce a lot the size of the logo, but now i I need to reduce a lot the space between
    1) logo and the menu for all versiones
    2) space below menu for all versions (specially in mobile!!)
    Thanks for your help

    • This topic was modified 4 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • 1) Looks like there is an empty <div class="description"> tag between the logo and the menu that has padding set to padding: 0 60px 29px. Removing that or setting the padding to 0 should fix it.

    2) On mobile, you can reduce the space by reducing the <header> tag’s padding. For desktop or bigger versions, looks like the space is coming from <div class="main_menu"> it has padding set to 74px.

    Hope this helps!

    Thread Starter Patobreak

    (@patobreak)

    Thanks sergio!!
    You speak spanish?
    Its better for me.
    How can i change all the things you suggest me? I mean where? in css class?

    You can simply add this to your CSS file (main.css or style.css if you have a child theme)

    1) This will remove the space between the logo and the menu

    header .description{
    padding-bottom: 0;
    }

    2) Use this to modify the space below the menu (you can replace the 35px and 10px below):

    /*for desktop*/
    .main_menu{
    padding-bottom: 35px; /*modify to your liking */
    }
    
    /*for mobile*/
    @media (max-width: 551px){
    .content_bg header{
    padding-bottom: 10px;  /*modify to your liking */
    }
    }
    Thread Starter Patobreak

    (@patobreak)

    thanks Sergio!!!!! really change. Thaks!!
    I reduce the size of logo and all is ok
    ———–
    1) Only the template has a space between the top of each page and the beginin of the content. For example the home page, There is a line orange ,,, space,,,, and the the image of the girl laughing….
    Is possible to erase this blank space?

    And please… the last problem…
    2)Can you help with sidebar? how can i center the images

    THANKS SERGIO, YOUR ARE GREAT!! (thanks for my bad english)

    1) That space is coming from your page title, your H1 tag. Remove the margin and padding. Modify this in your skin.css file, line 950:

    h1.page-title{
    padding: 0;
    margin: 0;
    }

    2) To center your images, you can center align the content by adding this on your main.css file line 13:

    .sidebar {
        text-align: center;
    }
    Thread Starter Patobreak

    (@patobreak)

    thanks sergio!! it works!! You are the best!!

    2) ok
    1) Sorry ?? (is not possible to change in the main.css? i dont know how to change skin. css file?? i dont know where is it? I′m not an expert. Sorry

    again, 1000 thanks!

    Glad to help!

    1) Sorry ?? (is not possible to change in the main.css? i dont know how to change skin. css file?? i dont know where is it? I′m not an expert. Sorry

    Yes, it should be possible to add it to the main.css file. Since skin.css is called after main.css, you will need to add something like this instead to main.css:

    article h1.page-title{
        padding: 0;
        margin: 0;
    }
    Thread Starter Patobreak

    (@patobreak)

    Buenos dias Sergio, espero estes bien alli donde estes.

    Perdona mi abuso de confianza pero necesitaría corregir algo que he descubierto hoy que no funciona a partir de los cambios!! La parte de blog!!
    El resto sigue perfectamente pero los cambios han afectado el primer post sale pegado al resto. Te adjunto link
    https://meditacionurbana.com/category/blog/
    Como ves, la linea verde corresponde a un post que no se despliega. He probado distintas opciones de post y sigue sin verse el contendido dentro del post sea del tipo que fuera.

    Me podrias indicar si eres tan amable, como solucionarlo?
    Muchas gracias.

    Hola,
    Al revisar el código, veo lo siguiente:

    <div class =" post_area_title "style =" display: none; ">
    <div class = "entry-content" style = "display: none;"> 

    Tanto el título como el contenido contienen CSS en línea. La propiedad display: none, prohíbe que ambos se vean en la página.

    Creo que esto tiene que ver con la configuracion de algun plugin o del tema que estes usando.

    La razón por la que creo que esto se debe al tema, o algún plugin, es porque generalmente, el código CSS en línea es a?adido usando JavaScript o PHP cuando se procesa la página ( a menos de que hayas hecho estos cambios directo al codigo ).

    Te sugiero que revises tus configuraciones, o si has hecho algun cambio reciente, deshacelo para ver si esto es la causa del error.

    Saludos

    Thread Starter Patobreak

    (@patobreak)

    Muchas gracias Sergio por tu pronta respuesta.

    Yo no he modificado el tema ni he agregado nada mas que el codigo anterior que me has sugerido. El tema insisto es que funciono para todo pero ahora ya no funciona para el blog. Tu crees que hay algo en este codigo que perjudica. Seria una pena tener que quitarlo ya que me lo has dejado perfecto!!!
    Se podria poner que este codigo se omita para pagina que contiene post?

    Te muestro como habia quedado
    /espacio antes barras menu*/
    #header-widget-area {
    width: auto;
    float: right;
    margin-top: 1em;
    }
    /*elimina header description */
    header .description{
    padding-bottom: 0;
    }
    /* elimina espacio entre logo y menu*/
    /*for desktop*/
    .main_menu{
    padding-bottom: 15px; /*modify to your liking */
    }
    /*for mobile*/
    @media (max-width: 551px){
    .content_bg header{
    padding-bottom: 0px; /*modify to your liking */
    }
    }

    #Content {
    width: 100%;
    padding-top: 0px;
    }
    /* sidebar. centra contenidos*/
    .sidebar {
    text-align: center;
    }
    /* Elimina espacio en blanco cabecera paginas */
    h1.page-title{
    padding: 0;
    margin: 0;
    }
    /* quitar espacio en blanco titulo y texto */
    h1.page-title {
    margin-bottom: 0;
    margin-top: 15px;
    padding-bottom: 15px;
    }
    /
    /* para no superponer share boton face y twitter en gallery */
    .shara_opt { margin: 0 10px 0 0; }

    /*elimina pading ancho pagina */
    .entry-content { padding: 0; }

    El único selector CSS que selecciona el título de la página es:

    /* quitar espacio en blanco titulo y texto */
    h1.page-title {
    margin-bottom: 0;
    margin-top: 15px;
    padding-bottom: 15px;
    }

    Pero este solo elimina el espacio de margen y relleno. No creo que sea la causa del problema. Puedes intentar eliminar estas líneas, o intentar quitar todo lo nuevo para confirmar si el código que sugerí esta causando problemas.

    Otra cosa que noté, hay dos errores en el codigo:
    Linea 1:

    /espacio antes barras menu*/
    #header-widget-area {

    Le falta un asterisco antes de la palabra “espacio”, tiene que ser:

    /*espacio antes barras menu*/
    #header-widget-area {

    Linea 42:
    Hay una barra inclinada “/” extra.

    
    /* quitar espacio en blanco titulo y texto */
    h1.page-title {
    margin-bottom: 0;
    margin-top: 15px;
    padding-bottom: 15px;
    }
    / 
    /* para no superponer share boton face y twitter en gallery */
    .shara_opt { margin: 0 10px 0 0; }

    Tiene que ser:

    /* quitar espacio en blanco titulo y texto */
    h1.page-title {
    margin-bottom: 0;
    margin-top: 15px;
    padding-bottom: 15px;
    }
    
    /* para no superponer share boton face y twitter en gallery */
    .shara_opt { margin: 0 10px 0 0; }
    Thread Starter Patobreak

    (@patobreak)

    Hola Sergio,
    ante todo muchísimas gracias.
    He quitado Todo!!! el css style y aun asi no funcionaba

    Se me ocurrió ir a blog ya que a veces al cambiar version de wordpress se me desconfiguran cosas y efectivamente destilde todas las opciones y funciono!!
    Entonces he ido destildando una a una y las que daban error eran titulo y descripcion.

    O sea que todo el codigo que me has proporcionado sigue perfecto!! (y gracias por las correcciones)

    Veo que eres un experto así que si prestas servicios fuera de este entorno hazmelo saber para recomendarte.
    Un cordial saludo

    Thread Starter Patobreak

    (@patobreak)

    Hi,
    por favor podrias ayudarme?

    1) no respeta los post sticky… No los deja fijos ( los he editado y vuelto a update y aun así siguen sin ser respetados aunque figuran como sticky incluso en quick edit)

    3) en los controles de redes sociales, pone un color de fondo naranja debajo de los iconos.
    Incluso al definir botones con link. He puesto background de customer en blanco y aun asi sigue poniendo fondo naranja. Con lo cual los iconos de redes sociales no se ven bien y los botones tampoco

    https://meditacionurbana.com/clases-de-yoga/

    4) como puedo centrar botones??

    Muchas gracias

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Reduce space between logo and menu’ is closed to new replies.