Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How can I remove the vertical lines lining the article views in mobile view

Featured Lock Resolved Task
Hi There

In the article view, the vertical lines reduce the mobile phone screen size substantially. How can I remove the vertical lines - only in article reading view and only on mobile phone view.

Thanks again

Adriaan

Attachments (1)

  • IMG_7356.PNG
    IMG_7356.PNG 263.4 KB

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
yes, by using custom CSS.


@media (max-width: 680px) {
.view-article .article-details {border: 0;}
}



after
foto_3083_2019.png

Attachments (1)

  • foto_3083_2019.png
    foto_3083_2019.png 40.7 KB

Adriaan Buys

More than a month ago #Permalink
Hi,
yes, by using custom CSS.


@media (max-width: 680px) {
.view-article .article-details {border: 0;}
}



after
[attachment]foto_3083_2019.png[/attachment]
Thank you so much, Paul, always o nice hearing from you. I have implemented and tried it on my iPhone 6+ and the margin on the side of the text still seem a bit wide. Not sure if you can check it. Not sure what Google prefers. I know Google doesn't want margins to small.

Paul Frankowski - Staff

More than a month ago #Permalink
Nobody knows what Google prefers, today is "X" tomorrow can "Y"
---
Those are default styles used there

.view-article .article-details {
padding: 15px;
border: solid 1px #ebebeb;
}



I overriden border for mobile view only, you can change padding value as well

Adriaan Buys

More than a month ago #Permalink
Nobody knows what Google prefers, today is "X" tomorrow can "Y"
---
Those are default styles used there

.view-article .article-details {
padding: 15px;
border: solid 1px #ebebeb;
}



I overriden border for mobile view only, you can change padding value as well
Thanks, the two did not work together so I combined them and it seems to work. Is this ok? I won't break anything ;)?

@media (max-width: 680px) {
.view-article .article-details {
border: 0;
padding: 5px;}
}

Paul Frankowski - Staff

More than a month ago #Permalink
I guess not, code looks OK


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 51
Sifat

Sifat

Total Accepted Answers: 38
Ofi Khan

Ofi Khan

Total Accepted Answers: 21
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21

119

Templates

306696

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us