Archived topic
Container not working on Mobiles
29 replies · Started by Mouse on June 4, 2020
Okay so after removing this following from CSS
.generate-columns .inside-article {
position: relative;
}
.generate-columns a:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
I was able to make it work on Dekstop. But it is not working on Mobile. Pleease help.
Hi there,
That CSS is simply used to expand the Click zone of post link to cover the entire container.
'container not working' - can you explain what the issue is ?
The container is not working on the mobile devices
Is the CSS still added?
I'm not seeing it at all.
Yes the css is added in the additional css in customizer.
But it is not working on the mobile phone. The image is not clickable cz of the funtion code you asked me to add but the whole container is not clickable on the mobile devices.
I'm seeing the CSS wrapped in desktop media query which is why it's not working on mobile:
https://www.screencast.com/t/hcQ5Wt1n
Okay.. So how to I make it container on the mobile phone?
Remove the @media (min-width: 769px) { that's wrapping the CSS code so it applies to all devices.
And here I wanted to make the whole post clickable. Not just the image text and read more seperately. It works okay on deskstop because i added the code in funtions to make the image not clickable and then added another code in css and then removed
.generate-columns .inside-article {
position: relative;
}
.generate-columns a:before {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
this code...
Now the problem is ...it's working on dekstop as you can see... the whole post is clickable and not seperately clicable...but when i see on phone....image is not clickable and only the links and the read more is clickable.
I've explained the issue in these two replies here:
https://generatepress.com/forums/topic/container-not-working-on-mobiles/#post-1316083
https://generatepress.com/forums/topic/container-not-working-on-mobiles/#post-1316099
Perhaps there is a @media (min-width: 769px) { somewhere that you didn't close with a }?
There is some sort of caching/minifying function turned on right now so I can't see the full CSS.
I have done that... that is not the issue...
Let me explain all ... allover again...
The posts that you see on life falcon dot com... used to have 3 links... one on image ...one on the title below... and one on read more... you guys asked me to add the function that will the link from image... i did that and it works fine on both the dekstop and the mobile...
BUT
The container (making the whole post (image,text,read more) as just one clickable link (so it doesnt give 3 links seperatly to that post (bad for seo) does not work on mobile phone....
If you open the website on phone you will see that the read more and the text under the image is clickable seperately and not one and the image is not clickable at all...
THis tells me that removing the link from the image worked fine on mobile but the container is not working on the mobile devices. I hope you understadn let me send the screenshot as well...
As you can see here ...
I want the whole thing clickable so a person clicks anywhere on picture or title or read more... it goes to post... and i also want one link per post on the homepage not 3.
Doesn't look like you've done what I've asked and explained above.
I'm still seeing the media query wrapped in around the original CSS:
https://www.screencast.com/t/jIRRRZD2jDA
Do you see @media (min-width: 769px) { anywhere in the CSS above?
Is it closed with a }?