Support Forums

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

Your Time: Our Time:

Responsive page title space

Featured Lock Resolved Issue
Hi,

I have a page title space added to the site using css -

.transparent-header .sp-page-title {
padding: 200px 0 30px;
}


It works fine on desktops and tablets but on mobile the space is way to big as the menu and logo shrink down for the mobile view.
How do I add the code so I change the padding just for mobiles ?
Many thanks

5 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
hi, If I may... I suggest use your code inside:

@media screen and (min-width: ___px) {
..............HERE..........
}

I mean, for example, :


@media screen and (min-width: 768px) {
.transparent-header .sp-page-title { padding: 200px 0 30px; }
}

Shibbir - Staff

More than a month ago #Permalink
Well,

If you want to use any CSS code for the mobile then you need to write CSS media query.

Thanks.

Top

More than a month ago #Permalink
hi, If I may... I suggest use your code inside:

@media screen and (min-width: ___px) {
..............HERE..........
}

I mean, for example, :


@media screen and (min-width: 768px) {
.transparent-header .sp-page-title { padding: 200px 0 30px; }
}
DOH! Many thanks and sorry for being so thick! Thanks again

Paul Frankowski - Staff

More than a month ago #Permalink
You're welcome,
we are here to help.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 141
Toufiq

Toufiq

Total Accepted Answers: 48
Shibbir

Shibbir

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Rodrigo Corbata

Rodrigo Corbata

Total Accepted Answers: 3

100+

Templates

200,000+

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