Labels Appear In Wrong Place
senolsengul
hello,
The tags in the article appear in the wrong place. Is it possible to center this?
Paul Frankowski
Accepted AnswerHi,
easy:
.article-body-wrap {padding: 60px 0px 60px 0px;}
.view-article .tags.mb-4 {margin: 0 auto; text-align: center; display: block;}Paul Frankowski
Accepted AnswerBut I also recommend correct font color contrast after hover on tags buttons (at the bottom) :]
.view-article .tags > li a:hover { color: #efeeff; }
Paul Frankowski
Accepted Answer.view-article .tagspopular ul > li a:hover {color: #111;}
for article tags (top-left area) - to make it more visible after hover on them (contrast).
senolsengul
Accepted Answerhello,
Thank you very much for your help. It was great. There is another issue that we could not solve, the issue in the link below, can you help with this issue?
Paul Frankowski
Accepted AnswerAbout social share link, I think I have better idea 4 you.
Search module/plugin/script that allows you to have sticky social share bar. Then more people will use it.
senolsengul
Accepted AnswerIt may be as you say. The content is not displayed properly on mobile devices at the moment. Post titles and images appear disproportionate on mobile
senolsengul
Accepted AnswerSome of the titles appear large and some appear small. Related article images do not fit on the screen.
Paul Frankowski
Accepted AnswerIt depends what Header you used, by default H1 and H2 will be bigger than H3, H4.
Using Custom CSS You can reduce font size on smaller device.
Paul Frankowski
Accepted AnswerAs I said before, you have to make extra styles for content used in Articles, it will be best universal solution. I do it for my projects as well, so I can set different for bigger and smaller phone. Of course you can do that manually in each addon... but after 60 min of doing it you will be tired.
Small tip, for content used in Text addon in Article:
@media screen and (max-width: 680px) {
.article-details-content .sppb-addon-text-block h2 { .... }
.article-details-content .sppb-addon-text-block h3 { .... }
.article-details-content .sppb-addon-text-block h4 { .... }
}
@media screen and (max-width: 540px) {
.article-details-content .sppb-addon-text-block h2 { .... }
.article-details-content .sppb-addon-text-block h3 { .... }
.article-details-content .sppb-addon-text-block h4 { .... }
}senolsengul
Accepted AnswerThank you for your interest.
There is an abnormal situation here. I am using your latest theme and I have not installed any plugins except the backup plugin. The titles and related article images do not appear properly on mobile devices. It is probably not right to make extra styles for each article. I am also using your other themes and I have not encountered such a situation in them.
Paul Frankowski
Accepted AnswerEvery template is different, please don't blame me for that.
Listen my advice and set common font-size that will be used in all articles where you used SPPB.
senolsengul
Accepted AnswerI don't blame you. This situation is just a little strange. Where exactly should I paste this code? Also, the related article images at the bottom of the article do not fit on the screen. How can we solve this problem?
Paul Frankowski
Accepted AnswerMy CSS code is almost empty, as example for you, as webmaster you should know the basics of CSS. I'm sure there are online courses and books about CSS in Turkish language as well. I don't know what values you want to use e.g. font-size:28px or font-size: 32px or others. Then use use it inside { ...}
You can use custom.css file or Custom CSS area >> https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta#documentation-heading-3 || it will be universal for whole site.
Forgive me but I don't understand what is wrong on your screenshot? I saw red arrow, but I don't know what next ....
senolsengul
Accepted Answerhere you go. You can look at the related articles at the bottom of the page.
https://www.turkiyexperiences.com/antik-kentler/amorium-antik-kenti
Paul Frankowski
Accepted AnswerConnection time limit exceeded
ERR_TUNNEL_CONNECTION_FAILED
Or my net is slow, or your hosting is overloaded
Paul Frankowski
Accepted AnswerMy suggestion for Mobile view will be
@media screen and (max-width: 680px) {
.related-article-list-container {margin: 10px;}
.article-details .article-ratings-social-share {margin-left: 15px; margin-right:15px;}
}