Jump to content

harry_ord

Members
  • Content count

    98
  • Joined

  • Last visited

Everything posted by harry_ord

  1. Woocommerce product list spacing

    Hello This is my site: http://www.armonisencia.cl/site/ I have a woocommerce product list and after that, i have a really long margin at the bottom. I'm trying to change it with css here: .woocommerce .products ul, .woocommerce ul.products { margin-bottom: 0; padding-bottom: 0; } But this doesn't seem to work, like only kind of works if a shrink my Chrome's window. Any idea how to fix it?
  2. CSS accordion

    Hello I want to put an accordion-like menu on my site. Looking on Google i came across this: https://codepen.io/raubaca/pen/PZzpVe So i tried to use it on my site here: http://www.armonisencia.cl/site/puntos-de-venta/ I like how when you put the input type as"select" in the tabs, they toggle open/close when you click them, but if you click another tab when you have one open, the first one keeps open. I wish it closed itself. By the other hand, i you put the input type as "radio" in the tabs, every time you lick on one of them, this opens and the others close. But you can close the open tab clicking it again. I wish i could have both effect in one. How can i do it?
  3. CSS accordion

    with it, i just used Javascript at the end: https://codepen.io/sureshrkm/pen/ZbzBpr Here is implemented at my site (at the bottom): http://www.armonisencia.cl/site/puntos-de-venta/
  4. CSS accordion

    I'm not putting those <br> myself something is generatin them. This is my code: <div class="tab"><input id="tab-one" name="tabs" type="radio"> <label for="tab-one">PROVIDENCIA</label> <div class="tab-content" > <h4 class="subtitulo">Aldea Nativa Tobalaba</h4> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.7643286413904!2d-70.58987878480131!3d-33.429388080780015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf0f3918e921%3A0x8ccee82ada4d5845!2sTobalaba+1799%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507233683497" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe> <h4 class="subtitulo">Bow Spa</h4> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.3185957576798!2d-70.61504988518345!3d-33.44100518077667!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf789181ed05%3A0xa9aaf7e364430541!2sAntonio+Varas+1540%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507235865077" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe> <h4 class="subtitulo">Mermoz Providencia</h4> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.11334590174!2d-70.60863198518412!3d-33.42028918078254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf69040fa573%3A0x23907b0f170fd4f8!2sAv.+Providencia+2368%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507236117341" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe> <h4 class="subtitulo">Dellanatura Mall Vivo Panoramico</h4> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.9918827394267!2d-70.61220768518406!3d-33.423455980781526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf65fc43b5e9%3A0x891eec39c901980b!2sDellanatura!5e0!3m2!1ses!2scl!4v1507236369461" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div>
  5. CSS accordion

    How can i make the icons appear then? i don't know why they don't appear on my site.
  6. Help styling my blog

    Hello This is my site: http://hojalateriaelguante.agencialosnavegantes.cl/ At the end of the page, just before the footer, i have a blog, and i need it to look like the attached picture. By default, the blog element of this theme has the featured image above and the content below, i did an inspection with Chrome and i tried putting a "float:left" to the featured image and kind of worked but, the content and the picture are too close to each other, and i want to separate them, just how they look on the example attached. How can i do this?
  7. Help styling my blog

    Sorry, other question. It is possible to make it look more like the picture? like it has a yellow square with the day and month over the image. How can i manage that? that's not CSS anymore, right?
  8. Help styling my blog

    I FEEL SO STUPID. I never thought about just putting the margin on the image. I just did that and ta-dan! it's solved.
  9. Help styling my blog

    I tried that, but they don't separate. I tried put a margin-left:50px; to the content, but it doesn't move. Even i tried putting obscene values like margin-left: 600px; and not, it won't move an inch.
  10. Weird dots on my page

    Thanks! it's fixed too. I've never understood the pseudo-classes ::before and ::after
  11. Weird dots on my page

    Hello This is my site: http://cvkj.agencialosnavegantes.cl/nosotros/ At the bottom of the page i have a section with a lot of icons with a hover effect that changes the black and white image to another similar but with color (see attached image). I don't know why but, i have some weird dots over each image. What makes it even weirder is the fact that when i shrink the browser's window, these dots dissapear. Why does this happen? how can i get rid of these ugly dots?
  12. Make inner row full-width

    Thanks! that fixed the problem, now it looks how i want.
  13. Make inner row full-width

    Hello This is my site: http://hojalateriaelguante.agencialosnavegantes.cl/ I need the row with the blue background row ("proporcionamos la mejor solución...") to be full-width like in the attached picture but i don't know how. Extra information: This is a wordpress theme and i'm using a page builder, the div i have to change its width is a row inside a section that has its own image background, so the row is an inner row of this section and that's why i think is not possible for the section with the blue background to use the screen's full width. How can i override that? i don't know how to approach this issue.
  14. Contact Form submit button positioning

    Here's the solution to my problem. Thanks. #footer-widgets form.wpcf7-form div:nth-child(2){ width: calc(100% - 40px); } #footer-widgets form.wpcf7-form div:nth-child(2) > span{ margin: 0; } #footer-widgets form.wpcf7-form div:nth-child(2) input{ width: 100%; } #footer-widgets form.wpcf7-form div:nth-child(3){ width: 40px; }
  15. Contact Form submit button positioning

    Hello This is my site: http://cvkj.agencialosnavegantes.cl/ I have a contact form at the bottom of the page and i'm trying to put the submit button next to the text box, but i'm struggling a lot. This is my initial css: #enviarbajo { background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat; background-color: #564585; width:40px; height:40px; padding:0px 0 4px 0; border:none; text-indent: -1000em; cursor:pointer; border-radius: 0; margin: 5%; position: relative; left: 35%; } Then i tried to position the button using media-queries, but i'm not able to put the button where i want @media (max-width: 768px){ #enviarbajo { position: relative; right: 100px; } } Other media-query below: @media only screen and (max-width: 500px) { #enviarbajo { position: relative; right: 50px; } Is there a more efficient way of doing this?
  16. Fix widget position in WordPress

    This is my site: http://hojalateriaelguante.agencialosnavegantes.cl/ In the footer section i have 4 social network icons with a hover effect. For that effect, i borrowed code from an overlay example in w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade It looks fine on my desktop screen, but, if i shrink the browser window, all the icons float to the right of the dog's picture, and i can't understand why this does happen. How can i fix them? i want them to stay down, below the dog picture.
  17. Fix widget position in WordPress

    #text-9.fwidget.et_pb_widget.widget_text { float: none; } Now is working! thanks a lot! How come you were able to see this? i tried to fix it myslef with the inspect element option on Chrome, but i wasn't able to see the problem at all.
  18. Fix widget position in WordPress

    This doesn't do anything: .textwidget { float: none; } And this pushes down the icons but also makes them giant: #footer-widgets .footer-widget .fwidget { float: none; }
  19. Fix widget position in WordPress

    I was using the image element for the widget, now i deleted and put a "text" element with the following html: <img src="http://HojalateriaElGuante.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-1_chico.png" style="float:none;"> Still doesn't work
  20. Fix widget position in WordPress

    I added this to the css .contenedor { position: relative; width: 100%; float: none; } Doesn't fix anything.
  21. Image overlay hover CSS

    Hello I'm following the course on w3schools and i stumbled upon this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade I'm wondering how can i do the same but with a group of pictures? like one next to another. I tried adding more images inside the "container" div, but it just change all the pictures inside when i hover on any of them. I'd like the hover to be independant for eac picture, like the text saying "image 1", the next saying "image 2", etc... different overlays for each picture, one next to another. Any help please?
  22. Image overlay hover CSS

    <!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .overlay2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .container:hover .overlay2 { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .text2 { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <h2>Fade in Overlay</h2> <p>Hover over the image to see the effect.</p> <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <img src="img_avatar.png" alt="Avatar2" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> <div class="overlay2"> <div class="tex2t">Hello World2</div> </div> </div> </body> </html> I do this and the 2 images are affected.
  23. Issue with float:left

    Hello, this is my site: http://cvkj.agencialosnavegantes.cl/servicios/ I need to do what's on the attached picture, but i'm not capable to. I do this: <div style="width:70%; float: left;"> <div > <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> But it doesn't work, because the next title get stuck in the float:left; before it. I tried to add another div before it like this: <div style="clear:both:"></div> and it doesn't work either. What can i do?
  24. Issue with float:left

    Ok, now is working, thanks, dsnoesuk! http://cvkj.agencialosnavegantes.cl/servicios/ Some questions: Where's the class test used on the example? What's flex? the "overflow:hidden" part is what fixes the float:left problem?
  25. WordPress doesn't load my font

    Hello, this is my site: http://cvkj.agencialosnavegantes.cl/ I have a font called "Averta" and i uploaded via FTP all the .otf filesto the /wp-includes/fonts/ on my WordPress. Now i'm calling it like this on the Custom CSS: @font-face { font-family: "Averta"; src: url("http://cvkj.agencialosnavegantes.cl/wp-includes/fonts/AVERTA LIGHT.OTF"); } body { font-family: "Averta"; font-weight: normal; }
×