August 9, 2020 at 03:01 UTC - Views: 19 #65042
I’m really grateful for any help; I’ve been fighting with this for hours and I’m getting haggard. I’m supposed to have his website up by tomorrow.
I’m using Weaver Xtreme, latest version, with Xtreme Plus and the current version of Elementor (not Pro). No other plugins. I understand that both Weaver Xtreme and Elementor play a part in the responsive functionality, which is what I’m having trouble with. Both Elementor and Weaver Xtreme are set to a max. content width of 1400px. I chose this width to avoid wide margins on 1920 px and 1600 px wide resolutions. Of course, I want it to look good on lower desktop resolutions too; I’ll deal with tablet and mobile resolutions later.
The page I’m working on is https://stpeterregina.ca/home. Right below the menu is a header graphic, and below that is a section with two columns of text. That section has a negative top margin (for reasons that will become obvious), entered as a percentage. When I open it in a browser in 1920 resolution, the text begins too high up. When I narrow the browser window down to nearly tablet resolution, the text descends vertically to the point where it’s too low. This is consistent across browsers.
I tried everything I can think of – changing the negative margin to pixel measurement and back, changing Elementor section, column, and textbox width and vertical alignment settings, etc.
I’m using the Clear subtheme in Weaver Xtreme. Nearly every WordPress and Weaver feature is hidden or inactive; I tried to make this situation as simple as possible to reduce the complexity of the page and prevent stuff like this.
I hope this can be fixed without editing CSS, using shortcodes, but if either of these are the only solution, I’ll be grateful for that..
Thanks very kindly for any advice.August 9, 2020 at 03:54 UTC - Views: 15 #65046scramblerModerator
Negative margin especially if wide are rarely a good idea.
You should have started by explaining what problem you are trying to solve, instead of describing your non working solution
First you have a -30px margin on an elementor section that contains the image I suppose to try and get rid of the space below the menu.
That space comes from a few things that you should change instead of using the -30px margin
There is a 1em space set in Main options > Content Area > Space between title and content, put a zero in there
There is a 4px top padding onm the content area, set it to zero in that same page
There is a 10px all around padding set somewhere in elementor that uses the rule
Find where that elementor setting is and change it
Second, you used a -22% margin on the container of the two columns.
This will never be properly responsive, as above a certain width, the image no longer grows, but your % will always be the same.
In order to be able to control the positioning in relation with the image, you need to have the two columns of text in the same container as the image.
Once that is done, we can look at coming up with the proper CSS to lower the columns responsively.
It could also be done (may be more easily), if the image was used as the background image of the container for both columns.August 9, 2020 at 07:38 UTC - Views: 12 #65057
Many thanks, Scrambler, and sorry for not giving a better description earlier. I’m going to follow your advice, starting with “Negative margin especially if wide are rarely a good idea.” I’m redoing the page, trying to do it with a background, as you suggested at the end. I’ll recreate the page from scratch now. About the 30px at the top, I wanted to go through everything to see where it was coming from, but just didn’t have time. Even tonight, I can’t look for the other 10px in Elementor – there’s just so many settings, and I don’t have a coder’s abilities, so I’ll temporarily close that up as before, and go back to “do it right” in a few days.
I’ll put something in the tip jar by way of thanks in a couple of days, when I have time to breathe. 🙂
Have a great rest of the weekend!August 12, 2020 at 01:10 UTC - Views: 7 #65079
I donated to the charity that you recommended at the tip jar. Great charity!
Thanks again, and best wishes.August 12, 2020 at 01:25 UTC - Views: 5 #65081scramblerModerator
- You must be logged in to reply to this topic.