# Layout: \[ Mobile \] / Tablet / Desktop **URL:** \ **Category:** RapidWeaver Classic\ **Tags:** stacks\ **Created:** [July 12, 2024, 6:51am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713 "2024-07-12T06:51:25Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 12, 2024, 6:51am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/1 "2024-07-12T06:51:25Z")
Hi 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](https://www.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. Grateful for the help. //Hans ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 17, 2024, 10:48am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/2 "2024-07-17T10:48:02Z")
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. ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 17, 2024, 1:15pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/3 "2024-07-17T13:15:57Z")
@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? ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 17, 2024, 2:35pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/4 "2024-07-17T14:35:12Z")
Hi, Thank you for your response. 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. Best regards, Hans ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 17, 2024, 3:55pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/5 "2024-07-17T15:55:31Z")
Hi, 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. Best regards, Hans Bergersen ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 17, 2024, 4:54pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/6 "2024-07-17T16:54:28Z")
Could you post a link to your project? ---
**Author:** ![Mathew](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mathew/32/2771_2.png) [@Mathew](https://forums.realmacsoftware.com/u/Mathew)\ **Post date:** [July 17, 2024, 5:11pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/7 "2024-07-17T17:11:54Z")
> [@Bergersen](#): > > I have text on the left and an image on the right. [senzia.se](https://www.senzia.se) 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. ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 17, 2024, 6:06pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/8 "2024-07-17T18:06:37Z")
Hi, 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. ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 17, 2024, 6:29pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/9 "2024-07-17T18:29:45Z")
> [@Bruno](#): > > ould you post a link to your project? 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. [book.senzia@gmail.com](mailto:book.senzia@gmail.com) /Hans ---
**Author:** ![Mathew](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mathew/32/2771_2.png) [@Mathew](https://forums.realmacsoftware.com/u/Mathew)\ **Post date:** [July 17, 2024, 7:07pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/10 "2024-07-17T19:07:37Z")
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: > **[BetterFloat stack for RapidWeaver](https://stacks4stacks.com/betterfloat/)** > > A remake of the float stack supplied with the Stacks RapidWeaver plugin. The BetterFloat stack provides more options for the setup of float layouts … 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. ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 17, 2024, 7:17pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/11 "2024-07-17T19:17:21Z")
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. ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 18, 2024, 7:10am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/12 "2024-07-18T07:10:27Z")
Test project [https://www.dropbox.com/scl/fi/usngfmjcut3amcv7vxe1r/RESPONSIV-DESIGN.rw8.zip?rlkey=ug00hxeqqr9y235fj9aalt77t&st=tii0vq6q&dl=0](https://www.dropbox.com/scl/fi/usngfmjcut3amcv7vxe1r/RESPONSIV-DESIGN.rw8.zip?rlkey=ug00hxeqqr9y235fj9aalt77t&st=tii0vq6q&dl=0) ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 18, 2024, 7:15am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/13 "2024-07-18T07:15:22Z")
I have created a new project to demonstrate the issues. I hope it is obvious what mistake I have made. I am not an expert in this. [https://www.dropbox.com/scl/fi/usngfmjcut3amcv7vxe1r/RESPONSIV-DESIGN.rw8.zip?rlkey=ug00hxeqqr9y235fj9aalt77t&st=tii0vq6q&dl=0](https://www.dropbox.com/scl/fi/usngfmjcut3amcv7vxe1r/RESPONSIV-DESIGN.rw8.zip?rlkey=ug00hxeqqr9y235fj9aalt77t&st=tii0vq6q&dl=0) ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 18, 2024, 7:43am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/14 "2024-07-18T07:43:52Z")
Add this in CSS part of a page : /\* iPhone X \*/ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) { .centered-image { display: block; margin-left: auto; margin-right: auto; } } /\* iPhone 8 Plus \*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) { .centered-image { display: block; margin-left: auto; margin-right: auto; } } ![Capture d’écran 2024-07-18 à 09.41.38](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/2/62340558bb5509795a5c2b922b05fc68cf09ba58.png) Does it fix your issue? If not, I think you should try a column stack with more customizable options about Breakpoints. Hope that helps. 🤞 ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 19, 2024, 8:27am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/15 "2024-07-19T08:27:03Z")
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. ```auto @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; } } ``` ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 19, 2024, 9:09am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/16 "2024-07-19T09:09:37Z")
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](https://stacks4stacks.com/adaptivegrid/index.php) from Stacks4stacks for example. Hope that helps 🤞 ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 19, 2024, 9:39am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/17 "2024-07-19T09:39:12Z")
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; } } ---
**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\ **Post date:** [July 19, 2024, 10:04am UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/18 "2024-07-19T10:04:21Z")
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 ? ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 19, 2024, 2:58pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/19 "2024-07-19T14:58:00Z")
Of course I will try the one you recommended ---
**Author:** ![Bergersen](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@Bergersen](https://forums.realmacsoftware.com/u/Bergersen)\ **Post date:** [July 19, 2024, 9:42pm UTC](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713/20 "2024-07-19T21:42:48Z")
Wow )) 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. **My Site:** > **[Anything is Possible: Personal Growth for Everyone](https://senzia.se)** > > Learn how to achieve your dreams with practical, real-life examples. This inspiring book by Hans Bergersen will motivate and guide you to turn your aspirations into reality. **Download stack** > **[AdaptiveGrid stack for RapidWeaver](https://stacks4stacks.com/adaptivegrid/index.php)** > > Arguably one of the most powerful responsive grid system stacks available for RapidWeaver. Uses a modern mix of HTML and CSS markup. [Next page](https://forums.realmacsoftware.com/t/layout-mobile-tablet-desktop/43713.md?page=2)