I need help to make an adjustment for mobile design. I’m “not” an expert in this, so the solution might be simple.
I have text on the left and an image on the right. senzia.se
The image will be placed at the bottom on a mobile, but when the width is too large (Phone Max), the image will remain on the right side.
This results in the text being displayed in a small field. This is not good from any perspective.
I wish to adjust the width for when this change occurs. All mobiles, regardless of size, should be displayed the same way. iPad and computer should be displayed differently.
Adjusting Settings for stacks_plugin5 for Responsive Design
Further Addition:
Hi again,
To clarify and provide more information regarding my previous post: I want the text and image to be displayed in a column on all mobile devices, including those with larger screens such as the iPhone Xs Max and iPhone 8 Plus. Currently, the image remains on the right side on these larger mobiles, causing the text to be displayed in a very narrow field. This issue occurs in the simulator but I have also observed it on Android mobile devices.
@Bergersen Hi, what I see in the code looks syntactically correct. You use the Voyager Theme and Elixirgraphics Stacks. I see a significant number of “!important;” in the code about media sizing (iPhone 8 and X). It is not impossible that some come into conflict. Did you add code directly?
Yes, I did add code directly to try and address the issue with iPhone 8 and X, but it doesn’t seem to be working. I also attempted to create a more generic code to handle various widths.
I want to ensure proper mobile adaptation up to the size of a tablet/iPad.
I will remove the code, but it will not affect the functionality.
The code has been removed, but the issue remains. There must be a way to access the stack plugin 5 and override the width value so that it works on all mobile devices regardless of size and screen ratio.
How did you put text or left and image on right? Using some code? Did you use a column stack? Did that column stack give you options for how to display columns when below a certain width (like, e.g., phones).
This should be a very easy thing to do: making 2 columns that are “responsive” (i.e. adjust according to the screen size). Normally you do NOT what to designate image and text width by fixed widths (e.g. 500px) but rather by something that can easily respond to different widths.
To place text on the left and an image on the right, I used column stack.
RapidWeaver 8 with Stack Plugin 5.
I placed text to left and the image on the right.
I selected the “Mobile” option in the stack for the column. This setup works as expected for iPhone SE and iPhone 8 in the simulator. However, for iPhone 8 and iPhone Xs Max, it behaves like it does on a tablet or desktop. I have also checked this on other mobile devices, including Android, and observed similar behavior.
I have the project on my hard drive, but I can send screenshots of the model. It’s possible to upload images on this forum, but it’s not possible to send them. I get an error message. It’s a small file.
It seems that you are using the 2 column stack that comes with Stacks. Is that correct? I think it’s an “oldish” stack and perhaps it does have the problem you describe: I’m not sure. But there are lots of other stacks made to handle this exact situation: many of them free.
Another default stack to consider are the Float stacks that come with Stacks. Or you could use this free stack made by Stacks4Stacks:
… however, there are a number of other stacks that will also handle this situation well.
I have zero idea what you mean by this:
I can send screenshots of the model. It’s possible to upload images on this forum, but it’s not possible to send them. I get an error message. It’s a small file.
What format is your screenshot in? Most like PNG or JPG but I suppose it could be something different. I have no idea what the difference for you would be between uploading and sending. If you can upload to the forum then everyone can see it … no need to send. Or put differently, uploading IS sending when working with a forum.
Share a link (Dropbox or any others) be sure it’s on read only and that you zipped the file (Dropbox could generate errors on non zipped RW files)for your security.
Unfortunately, the code did not work. I tried placing it globally, on each page, and in a field in Stack_Plugin 5 specified as CSS Classes, but it had no effect.
I exported the project. Numerous CSS files are created. I opened one file and found the following code. It is not enough to change here as there seem to be other factors affecting it. I do not have sufficient knowledge to understand the structure.
@media only screen and (min-width: 771px) {
.stacks_l_hidden {
display: none;
}
}
@media only screen and (max-width: 770px) and (min-width: 441px) {
.stacks_m_hidden {
display: none;
}
}
@media only screen and (max-width: 440px) {
.stacks_s_hidden {
display: none;
}
}
So the code I gave you seems not to be able to override the « base » settings. I encourage you to try another column stack, there’s a lot, like Adaptivegrid from Stacks4stacks for example. Hope that helps
I have also included a margin for even larger mobile devices. No effect.There are as many JavaScript as CSS files that might affect this, but I do not understand them. This is beyond my expertise:
@media only screen and (min-width: 771px) {
.stacks_l_hidden {
display: none;
}
}
@media only screen and (max-width: 770px) and (min-width: 521px) {
.stacks_m_hidden {
display: none;
}
}
@media only screen and (max-width: 520px) and (min-width: 441px) {
.stacks_s_hidden {
display: none;
}
}
@media only screen and (max-width: 440px) {
.stacks_xs_hidden {
display: none;
}
}
Could you try the stacks I’ve recommended to you? If it works just consider to make a small donation to its dev. I’d like to know (if you’re agree) the result if you try it. BTW Is your project a large one ?
I have to give a shout-out to the developers of this app. Wow! It works exactly as you’d want. It’s absolutely fantastic. An amazing stack. I will definitely contribute to their work. The site functions just as I wished with minimal effort. The mobile adaptation works perfectly. I gladly welcome any feedback on what can be improved.
