Mobile Version Has major alignment issues

[1amrahulranjan]

Hi @madi-nuralin,

I am Rahul from India. Firstly, you have made the most beautiful theme in the history of OJS. It's just amazing. I have been using the theme on my website thesciencebrigade.com/jst. The desktop version is working just fine and I have made some CSS changes and added the Stylesheet to the OJS.

However, when it comes to the mobile version, the theme loses its alignment. You can check the website link on desktop as well as mobile devices of different sizes. I have also added a stylesheet with the following code:

.hero-section, .hero-section > .container > .row {
min-height: 500px;
}

.hero-section.inner-page .hero-text {
margin-top: 70px;
}

.footer {
text-align: center;
background-color:#B7b6c1;
}

footer {
color: black;
}

@media screen and (max-width: 992px)
.hero-section, .hero-section > .container > .row {
min-height: 300px;
}

.hero-section .hero-text-image {
margin-top: -20rem;
}

.hero-section .iphone-wrap .phone-2 {
width: 250px;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}

However, when I add this code specifically the @media screen sections, the website becomes perfect on mobile devices but at the same time, the desktop version goes crazy.

When I remove the entire section after the @media screen, the desktop version becomes perfect, but the mobile device starts annoying.

Could you please check this website on your mobile devices of different different sizes and can you help me with this? Is there any code or is there any plugin or something that I can make the website look aligned on the mobile device?

Also, I want to change the text on the homepage from "Send Article" to "Submit Article". How can I do that?

Thank you.

[madi-nuralin]

Hi @1amrahulranjan
Thank you for the feedback!

1. I'll review the screen adjustment issue and return with an answer later.
2. There are two options to modify website context:
   A) You can directly modify the source code: In <ojs>/plugins/themes/material/locale/en_US/locale.po file find a line with msgid "plugins.themes.material.makeSubmission", then change it's msgstr to the 'Submit article'. After applying changes do not forget to refresh website cashes.
   B) There was a plugin which is designed to change website context without modifying source code, something like https://github.com/pkp/translator, however the repo is archived for now, I think you need to check it for in ojs forum.

[madi-nuralin]

There was a plugin which is designed to change website context without modifying source code

Finally I remembered the right name of plugin: Custom Locale Plugin, you can find it in Plugin Gallery of your journal.

[madi-nuralin]

However, when it comes to the mobile version, the theme loses its alignment. You can check the website link on desktop as well as mobile devices of different sizes.

Could you provide some screens from mobile device, in order to see alignment issue, please)

Btw, I'm pretty sure that in the beginning of @media statement you forget to open curly braket and close it at the end of style sheet.

[madi-nuralin]

smth. like:

@media screen and (max-width: 992px)
{
        /*Your code goes here and all style sheet here will be applied for the devices of size less than 992px*/
}

[1amrahulranjan]

Hi @madi-nuralin

I did add the curly brackets. Also, let me share the code I used and what it outputs in desktop as well as mobile.

Currently, the CSS Stylesheet has the following code

@media screen and (max-width: 992px)
.hero-section, .hero-section > .container > .row {
min-height: 300px;
}

@media (min-width: 992px)
.obj_issue_toc .cover {
margin-right: 0.143rem;
margin-bottom: 1.43rem;
}

Here is the link to the RAR File which has 3 screenshots. 1. Desktop Version, 2. iPhone 12 and 3. Pixel 4a.
Link - https://drive.google.com/file/d/1Ldrwi-QzBfb4AAVQbsgoFSj3WnzIXyT8/view?usp=sharing

[1amrahulranjan]

Also, I have added:

In the tag so that the page zoom on mobile device is at 87% which look a bit okay. If you look at the iPhone and other screenshots, you will see there is white blank part on the right edge of the screen. Also, you can also try opening https://thesciencebrigade.com/jst on your mobile devices and see what is opening.

If you want I can share the entire Stylesheet which I am using for your reference which might help you in improving the mobile responsive design in future update.

Link to CSS Stylesheet which I am using on this website - https://drive.google.com/file/d/1cNR-0w09UYgJJ_wZ_aK275ZYmHTpHoOn/view?usp=sharing

[madi-nuralin]

Hi
Thank you for suggestions!
Downsizing makes it so much better)
I'll consider all your suggestions in upcoming release.