![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
February 5, 2018 at 4:44 pm #908084
Hey guys and girls,
I created the website http://www.stripedsox.eu with the theme and I have the following problem of the text which is overlapping but only on Firefox and Chrome (on a Mac and a PC) as you can see here.
On Safari (Mac) there is no overlapping of text as you can see here.
Wordpress, Enfold Theme and all of my plugins are up to date so not sure what is the cause of this.
Administrator details in the private section.
February 5, 2018 at 9:22 pm #908206Hey Matthew,
I loaded on my firefox, but the issue seems to be on your screensize, not on the actual problem of Firefox or chrome.
The smallerst the screen then that issue will do happen.Best regards,
BasilisFebruary 6, 2018 at 11:14 am #908468Hi Basilis,
I don’t think that it is the issue though because I opened up the website from the same Mac and I got the results as per above on the different browsers.
Safari on Mac: https://imgur.com/a/Q5G4t
Google Chrome on the same Mac: https://imgur.com/a/ebrru
Firefox on the same Mac: https://imgur.com/a/Nljd9All at 100% zoom/actual size.
Any other solution to this, please?
-
This reply was modified 6 years, 7 months ago by
MattDalli.
February 6, 2018 at 1:29 pm #908559Hi,
I get the exact same results on Chrome and Safari on a 13″ MacBook Air, so I think it’s that customisation you have one there which is causing it. Maybe you could making the container size a bit smaller?
Best regards,
RikardFebruary 6, 2018 at 2:32 pm #908603Hi Rikard,
I’ve been playing with the containers as you requested but unfortunately neither myself nor the client is happy with the result. Reasons are as follows:
Either the container gets narrowed down too much and the text is not fully visible: https://imgur.com/a/VP3Ur
One of the containers is wider while the other two are narrower: https://imgur.com/a/M2dX7These are icon elements which are inside three separate layout elements – not sure if there is one element that could make this cleaner.
February 7, 2018 at 5:54 am #908901Hi,
Thanks for the feedback, but that is a different issue than what you initially posted about, right? I wanted to check your site again but it looks to be down (see private), could you try to get it back up again please?
Best regards,
RikardFebruary 7, 2018 at 4:08 pm #909242Hi Rikard,
The text now is not overlapping on any browser since I managed to sort out the widths of the containers. What I could see is that the backend of the theme changed slightly with the new update (as far I my memory serves me as it’s not the best).
So now yes, it’s a different issue where I have the columns which do not have equal widths and I need these to be so and not to overlap onto the stripes.
The website should be up and running now.
Thanks for your time.
February 8, 2018 at 2:43 am #909527Hi,
So now yes, it’s a different issue where I have the columns which do not have equal widths and I need these to be so and not to overlap onto the stripes.
Why did you use one third element for the first column and one fourth for the rest? That’s why they don’t have the same width.
Best regards,
IsmaelFebruary 8, 2018 at 10:42 am #909675It’s because it’s the only solution, for now, not to have the text overlapping on the stripes.
But, as stated before, the client requires for the columns to be all the same width and the text not overlapping on the stripes.
February 9, 2018 at 10:50 am #910188Hi,
The “strip” will still overlap with the columns on smaller screens regardless of the column size. You have to hide the “strip” if the screen size is less than 1600px.
Regarding the column width, use this css code.
#services .av_one_fourth { margin-left: 6%; width: 29.333333333333332%; }
Best regards,
IsmaelFebruary 9, 2018 at 11:33 am #910202Hi Ismael,
I amended your code slightly and it seems to be working on the browsers on a Macbook Pro and a PC Laptop. Will still need to test it out on smaller screens but so far – we’re happy with the result.
#services .av_one_fourth { margin-left: 4%; width: 29.333333333333332%; } #services .av_one_third{ margin-left: 6%; width: 29.333333333333332%; }
Thanks for your help!
-
This reply was modified 6 years, 7 months ago by
MattDalli.
February 10, 2018 at 5:19 am #910468Hi,
Great, glad you got it working. Please let us know if you should need any further help on the topic.
Best regards,
RikardAugust 15, 2018 at 11:37 pm #997718Hi Rikard,
Nothing else…thread can be closed.
Thanks!
August 16, 2018 at 8:06 am #997837 -
This reply was modified 6 years, 7 months ago by
-
AuthorPosts
- The topic ‘Overlapping Text on Different Browsers’ is closed to new replies.