1. Did the CSS I provided in the other topic work for you? Place all CSS into Appearance> Theme Options> Custom CSS.
img.aligncenter {
float: none;
margin-right: auto;
margin-left: auto;
}
2. Try adding this CSS
@media (max-width: 767px) {
.kad-page-title.home-page-title {
font-size: 30px;
}
.trans-header #logo a.brand {
font-size: 18px;
}
}
3. Sorry if I’m misunderstanding here, but it sounds like CSS like this that will adjust the padding of your home call to action on mobile will help your issue.
@media (max-width: 992px) {
.kt-home-call-to-action {
padding-top: 90px;
padding-bottom: 90px;
}
}
Try adjusting the “90px” amount until you get it how you want. Or if I missed the point entirely, let me know and I’ll try to give you a better answer.
Thank you so much! 2/3 OK and the silliest one stuck… for the other ones I think the problem is me not being familiar with the @media css, but I’m trying to learn as fast as possible 🙂
1. No go unfortunately. I still have images perfectly centered on my laptop (or any other PC) and aligned to left on mobile, in preview and on actual mobile device as well (see screenshot from Samsung Galaxy). I’m sure this is some silly thing I messed up. This is the code for one of these widgets, maybe this helps, it has all aligncenters one may ask for…:
<a href="http://klarakolonits.com/2016-2017/"><img class="aligncenter wp-image-3293" src="http://klarakolonits.com/wp-content/uploads/2016/07/2016-mozart-2-300x120.jpg" width="250" height="100" data-id="3081" /></a>
<p style="text-align: center;"><a href="http://klarakolonits.com/2016-2017/"><strong>MOZART | CONCERT ARIAS</strong></a></p>
<p style="text-align: center;"></p>
<p style="text-align: center;"><a href=" http://klarakolonits.com/2016-2017#jazz"><img class="aligncenter wp-image-3291" src="http://klarakolonits.com/wp-content/uploads/2016/07/2016-jazz-2-300x120.jpg" width="250" height="100" data-id="3081" /></a></p>
<p style="text-align: center;"><a href="http://klarakolonits.com/2016-2017#jazz"><strong>OPERA | JAZZ</strong></a></p>
<p style="text-align: center;"><a href="http://klarakolonits.com/2016-2017#katlan"><img class="aligncenter wp-image-3292" src="http://klarakolonits.com/wp-content/uploads/2016/07/2016-cosi-1-300x120.jpg" width="250" height="100" data-id="3081" /></a></p>
<p style="text-align: center;"><strong><a href="http://klarakolonits.com/2016-2017/">COSÌ FAN TUTTE | OperaLab</a></strong></p>
<p style="text-align: center;"><a href=" http://klarakolonits.com/2016-2017#strauss"><img class="aligncenter wp-image-3290" src="http://klarakolonits.com/wp-content/uploads/2016/07/2016-strauss-2-300x120.jpg" width="250" height="100" data-id="3081" /></a></p>
<p style="text-align: center;"><strong><a href="http://klarakolonits.com/2016-2017/">STRAUSS: VIER LETZTE LIEDER</a></strong></p>
2. This was perfect thank you! What should I change to keep the smaller page title on every page?
3.Yes, indeed adjusting the padding works perfectly for mobile not supporting “Fixed” image. I will check on iPad later, but that should not be that much of an issue, there are rather phone and pc visitors.
ad. 2 on every page that uses Page Title header layout, of course
As the 2 Qs in title found their solutions, I’m marking as resolved this one, we can continue the investigation of the first one in its original topic. Thank you very much!
1. Here is some CSS that appears to work on my end:
.textwidget .aligncenter {
float: none;
margin-right: auto;
margin-left: auto;
}
2. Change this CSS:
@media (max-width: 767px) {
.kad-page-title.home-page-title {
font-size: 30px;
}
.trans-header #logo a.brand {
font-size: 18px;
}
}
to this:
@media (max-width: 767px) {
.kad-page-title {
font-size: 30px;
}
.trans-header #logo a.brand {
font-size: 18px;
}
}
3. This is resolved then?
Hope this helps!
