Page is Not Showing Up Correctly In Narrow Format, Also Doubled Label - Question | JoomShaper

Page is Not Showing Up Correctly In Narrow Format, Also Doubled Label

S

smouellette

Template 3 weeks ago

On the following page https://shugenkai.org/index.php/aikido/core-pages/nafudakake on a phone, the third row has a label of Menkyo Kaiden. The label is doubled over on display for both wide format and phone format, though there is just one entry on the page.

On phone, the two photographs overlap I think. The photo on the right is the only one that shows.

Additionally, the sandwich menu does not seem to work in narrow format like for a phone.

Login information below!

0
10 Answers
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 weeks ago #224437

For button color check my previous response, As button is from sp page builder, So, it will override template design, this is normal behavior.

For favicon.ico, add this from template options site icon or directly use in your

JRoot/templates/your_templates/index.php

Use this css to fix monile issues:

@media (max-width: 991px){
#sp-main-body {
margin: 10px;
}
}

Thanks

0
S
smouellette
Accepted Answer
2 weeks ago #224470

Aha, I found the button settings for color. I guess I was using other button color settings that didn't affect it.

Can I suggest that the template options favicon selector should allow uploading of a *.ico format? As it is, it only allows .png or .gif. I tried uploading a renamed favicon.png from the template options interface and it threw an error. I was able to upload it separately and it worked when selected.

I just recreated the two elements that were rendering narrow and full justified and that fixed it.

Thanks for the help!

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 weeks ago #223829

Hello,

Thank you for reporting the issue.

Could you please share a screenshot showing the duplicated “Menkyo Kaiden” label? This will help us better understand exactly where the issue is occurring.

From what we can see, the page does not appear to be fully responsive on mobile devices. Several layout elements are not adapting correctly to narrow screen sizes, which is likely causing the overlapping images and menu issues.

Additionally, the current color combinations on the page appear inconsistent and may need adjustments to improve visual balance and readability.

At this stage, it looks like the site would benefit from a proper responsive and UI/UX review. We would recommend working with a developer or designer to fully optimize the site for mobile responsiveness and overall design consistency, as we do not provide customization services.

Once you share the screenshot, we can further assist in identifying the specific duplication issue.

Thank you.

0
S
smouellette
Accepted Answer
2 weeks ago #224245

I agree that the UI/UX is not working. It has never been fully responsive. The site was originally made with Yamas. If you look at my posting history, it never has been working correctly.

Any UI/UX is either default Yamas or changes made by Joomshaper. So if you conclude that the site is not working correctly, as I do, I have to ask why.

Now the site has a bright pink background on Safary, Edge, and Chrome, but not on Firefox. I don't know when that happened.

Here is a screenshot for the overlapping photos and doubled captions. https://imgur.com/a/kWmRS5E

Please advise on next steps. If Yamas is just broken, please advise on another template to use.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 weeks ago #224271

Please make the design more professional, especially the color choices. Right now, some color combinations reduce readability and visual quality. For example:

  • Pink background with low-contrast text makes the content difficult to read.
  • Blue menu background with black text is also not a good combination.
  • Some bright color mixes feel inconsistent and unprofessional.

Please use a cleaner and more balanced color palette with proper contrast for accessibility and readability.

Also, I noticed the person addon still does not use the default style correctly.

By the way, I fixed the person image alignment issue and the text overlapping issue on: https://shugenkai.org/index.php/aikido/core-pages/nafudakake

Thanks.

0
S
smouellette
Accepted Answer
2 weeks ago #224332

I have never had a pink background. Now I do.

I have never had a red background for the footer. Now I do.

I have never had a translucent box at the bottom. Now I do.

I have never had pink text. Now I do.

I have never had a pink outline around the floating menu. Now I do.

I don't know exactly when this happened, but I think it was when I updated the Yamas template to the most recent version. Here is how it looks to me in Firefox with the correct colors: https://imgur.com/a/FObhA7b

Presumably, this is a cached version since the change was so recent.

Can you explain why all the colors changed?

I appreciate you explaining what you did to try to fix the nafudakake page, but I am not seeing a change other than the pictures are sometimes stretched much wider horizontally. Also, the main menu at the top now does not show up. I will see if I can figure out how to fix these remaining issues.

Listen, I am tired of Yamas taking up all of my time and never working right. I switched over to the Yoga template. Without changing anything, almost all of the colors were correctly rendering in all browsers.

0
S
smouellette
Accepted Answer
2 weeks ago #224337

Having switched over to the new template ("Yoga"), I have the following questions:

  1. I can't find where you changed the sppb-person-image to 100% width. I do not want that, since it just messes up the photos. Can you change that back?

  2. Also, can you tell me how to change the main menu / header background color when it is sticky? Right now it is a color gradient and I want it to be a single color.

  3. Can you also tell me how to change the color of the sandwich menu icon? It is currently white with a red mouseover and I would like it to be visible on the light background.

  4. Also, can you tell me how to make the formatting I put in for the button on the blue background and the titles for the feature boxes on the blue background render? It looks like they are being overridden by sp-main-body a although they show up correctly in the front end editor.

  5. (I figured this one out)

Here is a snapshot of what I am referring to for 2-4 https://imgur.com/a/LyAeGTv

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 weeks ago #224354
  1. I have removed form that page: https://prnt.sc/bM3Lm8pipcH1

  2. To change main menu header background, adjust your color here then use this css in your custom css:

#sp-header:after {
    background-image: -webkit-linear-gradient(137deg, #ff5757 0%, #764aff 100%);
    background-image: -moz-linear-gradient(137deg,#ff5757 0%,#764aff 100%);
    background-image: -o-linear-gradient(137deg,#ff5757 0%,#764aff 100%);
    background-image: linear-gradient(137deg, #ff5757 0%, #764aff 100%);

}

if you don't need this then use this css

#sp-header:after {
    content: unset !important;
}
  1. To change sandwitch menu color, use this css
#offcanvas-toggler > i {
    color: #000000;
}
  1. Fro changing button color, I have already adjust color for your, you may change it form your home page -> Backend Editor -> Select the button then follow this: https://prnt.sc/ImGGO1gfOJhe

Thanks

0
S
smouellette
Accepted Answer
2 weeks ago #224398

This is super helpful Zaiul! Thank you!

Follow-on questions...

For question 4, you can see in your screenshot how the colors are set to a blue and yellow and you set a white background color, but on the rendered page itself it is a blue default text color with the white background. How do I get the rendered page to respect the color settings selected in the button?

The same problem occurs in the feature boxes right below that button. the Text, Link, and Link Hover are all set to different colors, but it renders as the same blue of the background.

Next new question. I have a favicon.ico file in the root directory and it doesn't seem to be working. I see where there is a place to select a favicon in the template style basic section, but it does not accept *.ico files. How can I get my favicon.ico working?

Thanks again for your help!

0
S
smouellette
Accepted Answer
2 weeks ago #224405

And another responsive question. On a mobile device, the following two elements are not using the full width of the available space, where other elements do a better job of adapting.

https://imgur.com/a/4upzYDY

Can you advise on how to improve the look on mobile devices?

0