harry_ord
-
Posts
117 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by harry_ord
-
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.
-
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.
-
Thanks! it's fixed too. I've never understood the pseudo-classes ::before and ::after
-
Thanks! that fixed the problem, now it looks how i want.
-
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?
-
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?
-
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.
-
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; }
-
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?
-
#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.
-
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; }
-
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
-
I added this to the css .contenedor { position: relative; width: 100%; float: none; } Doesn't fix anything.
-
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.
-
<!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.
-
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?
-
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?
-
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?
-
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; }
-
Ok, i think that happens when you just copy code from someone else. I gave up fixing that and i made it all over myself: <a href="#"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"> <p style="font-size: 21px; font-weight: bold !important;">Asesoría y Servicios Contable</p> </a> And the CSS: .cuadrado-icono { background-color: #fff; } .cuadrado-icono p { color: #08a121; } .cuadrado-icono:hover{ background-color: #453669; color: #fff; } .cuadrado-icono:hover p{ color: #fff; }
-
What are you talking about? i have the a paragrapah with its 2 tags just after the image: <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a>
-
Hello This is my website: http://cvkj.agencialosnavegantes.cl/ In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover. The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening? HTML for the buttons <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a></div> Here is the CSS related: .et_pb_button_0.et_pb_button.et_pb_module { width: 290px; border-radius: 50px 50px 50px 50px; padding: 50px ! important; margin: 1%; } .et_pb_button_0 { color: #08a121!important; background-color: #fff; border-width: 1px !important; border-color: #fff; letter-spacing: 0px; font-size: 21px; font-weight: bold !important; } .et_pb_bg_layout_light.et_pb_button_0:hover { color: #fff; background: #574586; } .et_pb_bg_layout_light.et_pb_button_0:hover p { color: #fff; }
-
Hello This is my site made with Wordpress using the theme called Divi. http://ciudadcapital.agencialosnavegantes.cl/contacto/ Something really annoying is happening right and that is whatever section i put after the Instagram section, it gets forced to be positioned to the left. Any idea why this is happening? In this moment is the footer what appears aligned to the left, but if i put the footer in another place, it gets centered; the same if i put another section just after the Instagram section, it gets forced to the left. What is causing it?
-
Other question, please. How can i edit the browse button?
-
OMG! GENIUS! It's solved. I need to remember that in the future.
