How can I adjust the margin around the 'New arrivals' h1 element?

Technical Q&A
1

Hi all,

For some reason I don’t seem to be able to change the margin or padding around the “New arrivals” h1 element in the following page title:

https://pamir-lifestyle.com/collections/new-arrivals

I’ve tried overriding the margin, padding and margin-block properties; I’m not sure what I’m missing here.

Thanks for the help,

2

Hi,

To change the height of margin/padding around the heading, you can install my free app Custom CSS and add the following code

.collection-image-new {
  height: 200px !important;
}
3

Hi,

That simply changes the dimensions of the image not the h1 block or its padding/margin.

Regards,

4

Hi,

Please try it out because the image creates spaces around the heading not its margin/padding.

5

I did and it only resizes the image…

Any other thoughts?

6

Hi,

You can try the following code

.collection-title-header .title-label {
  padding: 30px 20px !important;
}
7

So that works to resize the top and bottom padding (strangely as it should be top and right). I tried the other combinations also (ex: padding: 100px; doesn’t change the left or right padding only top and bottom)!

Regards,

8

If you want to change value of each padding part (top, bottom, left, right) you can try the following code

.collection-title-header .title-label {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
9

Indeed. My issue here is that changing the left or right padding in that way doesn’t work…

10

Got it. It seems that the theme set limitations for width of the container.

Please try the following code

.collection-title-header {
  max-width: none !important;
  min-width: 0 !important;
}

.collection-title-header .title-label {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
11

hello @the_rvh

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 769px){
.centered   .collection-title-header{
    min-width: 450px !important;
}
}

@media only screen and (max-width: 429px){
.centered   .collection-title-header  .title-label{
   font-size: 30px !important;
   padding: 12px !important ;
}
}
12

Amazing thanks guys! This had me stumped!

@ LamQSolutions - your solution did work as well but without the media queries.

Regards,