We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

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

Your Time: Our Time:

Logo not on the correct place mobile - tablet - computer - laptop

Featured Lock Resolved Issue
Hi

The logo is not correct align. Not everything is showing. How can I change that. An time go one of your employees changed something in the template, but I do not how. I'm making the website again from scratch.
Hope you can help me soon and tell me what to do.

[attachment]Schermafbeelding 2020-02-04 om 16.57.31.png[/attachment]

Attachments (2)

  • Schermafbeelding 2020-02-04 om 16.56.37.png
    Schermafbeelding 2020-02-04 om 16.56.37.png 129.5 KB
  • Schermafbeelding 2020-02-04 om 17.12.06.png
    Schermafbeelding 2020-02-04 om 17.12.06.png 43.5 KB

4 Answers

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
May I have your site URL, please?
You may select a mobile logo from the basic settings of the template option:
https://prnt.sc/qxkg1x
If you create a custom header then you may select grid options from layout builder.
https://www.youtube.com/watch?v=bYPgWAWzXpM

Best Regards

Puntje

More than a month ago #Permalink
i will give an login and link by pb. The mobile and tablet are not good aligned.


this code will not work

@media only screen and (max-width: 768px)
#sp-header .logo img {
width: 95px;
margin-left: 50px;
margin-top: 40px;
}

Attachments (1)

  • Schermafbeelding 2020-02-04 om 22.54.17.png
    Schermafbeelding 2020-02-04 om 22.54.17.png 31.1 KB

Puntje

More than a month ago #Permalink
Is This correct or is there another way. I put this in custom css

@media only screen and (max-width: 991px){
#sp-header .logo img {
width: 95px;
margin-left: 45px;
margin-top:28px;
}
}

@media screen and (min-width: 992px){
#sp-header .logo img {
width: 180px;
margin-left: 20px;
margin-top:28px;
}
}

What do you use for media screens on mobile - laptop and computer

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
Yes, you may use the above codes in your custom css.
And if you want the mobile sticky header to cover the logo in a good way then you may use the following code too:

.is-sticky #sp-header{height: 100px;}


Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

123

Templates

327527

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

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us