Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 5, 2018 at 4:44 pm #908084
    MattDalli

    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 #908206
    Basilis

    Hey 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,
    Basilis

    February 6, 2018 at 11:14 am #908468
    MattDalli

    Hi 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/Nljd9

    All at 100% zoom/actual size.

    Any other solution to this, please?

    • This reply was modified 6 years, 9 months ago by MattDalli.
    February 6, 2018 at 1:29 pm #908559
    Rikard

    Hi,

    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,
    Rikard

    February 6, 2018 at 2:32 pm #908603
    MattDalli

    Hi 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/M2dX7

    These 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 #908901
    Rikard

    Hi,

    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,
    Rikard

    February 7, 2018 at 4:08 pm #909242
    MattDalli

    Hi 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 #909527
    Ismael

    Hi,

    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,
    Ismael

    February 8, 2018 at 10:42 am #909675
    MattDalli

    It’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 #910188
    Ismael

    Hi,

    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,
    Ismael

    February 9, 2018 at 11:33 am #910202
    MattDalli

    Hi 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, 9 months ago by MattDalli.
    February 10, 2018 at 5:19 am #910468
    Rikard

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    August 15, 2018 at 11:37 pm #997718
    MattDalli

    Hi Rikard,

    Nothing else…thread can be closed.

    Thanks!

    August 16, 2018 at 8:06 am #997837
    Rikard

    Hi,

    Thanks for letting us know :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Overlapping Text on Different Browsers’ is closed to new replies.