-
AuthorPosts
-
July 14, 2020 at 11:16 pm #1230459
Hi,
I added logos to my delivery methods on my shopping cart page (see screenshot), by adding this code:.shipping_method {margin-right: 30px!important;} #shipping_method_0_boxtal_connect21:before {content: url(https://www.my-website.fr/medias/accueil/icones/colissimo-logo-small.png); padding-left: 20px!important;} #shipping_method_0_boxtal_connect22:before {content: url(https://www.my-website.fr/medias/accueil/icones/chronopost-logo-small.png); padding-left: 20px!important;} #shipping_method_0_boxtal_connect20:before {content: url(https://www.my-website.fr/medias/accueil/icones/relais-colis-logo-small.png); padding-left: 20px!important; padding-top: 40px!important;}
But I’m not able to find which code I need to add to move those icons a little bit to the top, to align them to the text.
Could you please help me?
If needed, you can find a link and credentials to my website in private content.
Thanks a lot!July 16, 2020 at 7:03 pm #1231007Hi,
Sorry for the late reply!
I could not find your custom CSS code and cannot see icons on your cart page. Have you decided not to use icons? :)
Cheers!
YigitJuly 16, 2020 at 10:41 pm #1231034Hi Yigit,
Thanks for your reply.
No, I didn’t change my mind :-)
In fact, this is a mystery… The code is in the style.css file (line 690) in my enfold-child folder and icons are displayed on my computer, as you can see on the previous screenshot. But they are not displayed on my phone or on another computer (and so not on yours too) and I really don’t understand why…July 18, 2020 at 5:20 pm #1231480Hi Yigit,
I found the solution of the displaying issue.
The only thing I would need is moving icons a little bit to the top, to align them with the text.
Could you please help me?
Thanks a lot! ;-)July 20, 2020 at 4:44 pm #1231794Hi,
It still does not show up on my end but please try adding following code
#shipping_method_0_boxtal_connect21:before, #shipping_method_0_boxtal_connect22:before, #shipping_method_0_boxtal_connect20:before { position: relative; top: 3px; }
Also, there were 3 errors in Style.css file of your child theme. I fixed them. In future you can use this website to check for CSS errors – http://csslint.net/ :)
Best regards,
YigitJuly 20, 2020 at 5:56 pm #1231804Hi Yigit,
I changed the end of your code with
top: -3px;
and it works like a charm. Thanks you very much!About errors in my style.css file, could you tell me which ones they were? :-(
Because it maybe solved some issues I had on my website…Also about this, in the last hours, I noticed some changes in this file:
Indeed I’m used to add some /*CSS titles*/ to identify pieces of code, but I’m also used to write them in French… And all “à”, “é”, “ô” (and so on) had been replaced by special characters.
Is it possible it happened when you corrected my file?July 20, 2020 at 7:11 pm #1231824Hi,
You are welcome!
One was a missing semi colon in the code, other one was “font-color” instead of “color” and the final one was something like “}fixed!important;”.
Style.css file was empty on my end when I checked it on 16th so I believe it is possible that it happened when I updated the file even though I only fixed the errors and did not touch comments :)
Best regards,
YigitJuly 21, 2020 at 12:14 am #1231897Hi Yigit,
I found the “font-color”, but I can’t find the two other issues…
I checked a backup of my style.css file from the 14th and there is only one “fixed” term, in this code and it seemed to be ok:
@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header { position: fixed!important;} }
To find where the semicolon was missing, I tried to check the same backup of my style.css file with CSS Lint, but I get no errors, only warnings :-S
July 27, 2020 at 5:08 am #1233428 -
AuthorPosts
- You must be logged in to reply to this topic.