Href not working on iOS Chrome, Firefox or Safari

HTML & CSS
1

Hey guys,

Have a really weird bug on the website https://www.evernatural.com.au/blogs/the-benefits-of-natural-toothpaste

The href links work on desktop but on Mobile devices they do not.

Site is running OpenCart 2.3.0.2

Have combed through the source code and can’t seem to figure this one out.

Any ideas?

Regards,
Motion

2

Hi,

It has nothing to do with the href but in the way you have stacked and laid out those items. The links don’t work on desktop either if you resize the screen smaller into one column.

The problems is twofold.

One you have applied position:relative to each column. This means that that columns that come later in the html will stick on top of anything before if there are any overlaps to consider.

This may not have been a problem but you have floated the p elements in the first column (a bad mistake as they are 100% wide anyway and don’t need to be floated) which results in the background of the following div sliding back up to the containing block and covering the floated text and sitting on top of it (which is why you can’t click the links). Floats are removed from the flow so the backgrounds of elements extend under the floats or on top if you have adjusted stacking order (as in your case).

All these issues are likely because of a flawed approach to float containment. Elements that are 100% wide never need to be floated and are usually only done so on order to contain floated children or because an author hasn’t worked out why margins aren’t working on static elements that follow floats.

There are a couple of solutions but it all depends on how deep this methodology has been used throughout your site. You could simply remove the position:relative from the columns but I have no idea if you have built other elements throughout the site that require their use and thus removing them could break other things. You could instead remove the floats from the paragraphs but again does depend on whether you are counting on these floats to contain inner floats or create margins against other floated content.

I would suggest that for now you remove the float from the paragraph on smaller screens only to minimise disruption.

e.g.

@media screen and (max-width:768px){
    .newsblog-article #content .row p, .newsblog-category .blogtext {
        float:none;
    }
}

As usual with css the devil is in the detail and just throwing rules at elements because it seems to work is not the best approach but a more sound methodology of containing and using floats is needed. It is also not wise to apply position:relative unless you have a need for its use.:slight_smile:

1 Like
3

Thanks Paul, I have no idea what the previous developer has done but I will try that suggestion. Thank you

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.