terrathemes

Oh sorry, I just noticed that I wrote LESS instead of CSS. But I am glad that you figured out the right rule. Thanks for your feedback and sharing your solution.

Hi Boris, you can catch the admin bar by using its id and adjust the top value by the height of the admin bar.

#wpadminbar {
  .topbar {
    top: 32px;
  }
  .nav-container.sticky.fixed {
    top: 76px;
  }
  .nav-container {
    top: 76px;
  }
} 

Hi Boris, it depends a little bit on your page layout and styling. As there is no configuration for that you could start using this CSS:

.topbar {
  position: fixed;
  width: 100%;
}
.nav-container.sticky.fixed {
  position: fixed;
  width: 100%;
  top: 45px;
}

Maybe the topbar also needs a background-color. Furthermore it could be useful to wrap that CSS into a media query to apply these styles only for certain viewports, e.g.

@media only screen and (max-width: 991px) {
  ...
}

Please let me know if this already helps or if you need further assistance.

Hi @wilky76, I couldn’t find what you mean with “quick contact info”. However I updated the plugin Meteorite Extensions to version 1.10.1 and added the functionality to make the phone number clickable in the widget Meteorite: Contact Info. If that’s what you need, please update the plugin to get the widget option to make the number clickable.

Let me know if this solves your issue now. Otherwise I need another description which element on your linked page you mean.

Alright, could you then please explain to me which Page Builder and which block/widget you use to create the clickable phone number? Do you speak about your Contattami page? What exactly do you paste in the widget text area?

It coud be possible that HTML is not allowed in the widget you use. Then it could work to rebuild the widget output with a layout builder widget and use icon widgets left and html editor widgets on the right.

As I am not available until end of the week, it might take a while for me to check this in depth.

Hi, you can make a phone number clickable with the tel element inside the href link:

<a href="tel:+4733378901">+47 333 78 901</a>

Inside the link in the editor you can just write tel:+47….. as your link.

Does this solve your issue?

Hi @borisj, thank you for your report and also for giving a quick fix. I removed the css rule mentioned above completely and uploaded a new version of Meteorite (v2.5.2) which contains the fix for Chrome.

You would have to do that via CSS, as the widget doesn’t have the option to hide it.
Find out the ID of your row or give your row / widget a class or ID and hide the .entry-content:

#panel-ID .entry-content  {
	display: none;
}

Hi,

sadly it is not possible to adjust the default.

To show individual post categories on a page you can use e.g. the Post Loop widget from the SiteOrigin Page Builder.

Hi,

sorry for the late response, it’s possible with CSS like this for both buttons:

.parallax-text .header-cta-buttons {
	margin-top: 50px;
}

50px is the default, so you would have to use higher values.

If you want to adress only one of the buttons you can use these classes:

.header-cta-one {
	margin-top: 150px !important;
}
.header-cta-two {
	margin-top: 250px !important;
}

Let me know if this works for you.

Thanks for letting me know ??

Oh, I see you already did. Thanks!

You’re welcome, thanks for your kind words!
I will mark this topic as resolved.

Feel free to share your opinion about Meteorite in a review.

I overlooked that when using a custom row class for the styles, !important must also be used on the styles of flex-wrap and flex-direction. Please try this out.

Hi,

you can apply some custom CSS e.g. in the Customizer or any Custom CSS plugin to achieve that.

Use:

@media (max-width: 780px) {
  #rowID {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }

  #rowID .panel-grid-cell {
    width: calc(50% - ( 0.75 * 30px ) ) !important;
  }
}

Find out the row ID via the browser tools or just add your own row ID in the settings for this row.

If you want to make it full width again for small sizes, you can use this CSS:

@media (max-width: 480px) {
  #rowID .panel-grid-cell {
    width: 100% !important;
  }
}

Please let me know if this solves your question or if you need further help.