Before you ask please READ THIS

Full Width Inner Sections Pro January

in Rife Posts: 87
Hi Guys

Whats the best way to create a FW Inner Section (Edge to Edge) when you have boxed content in the theme - See January Home Page

Changing the page to full width doesnt work - but changing the columns gap to no width seems to work??

Which way do you recommend to keep the mobile responsiveness working?

I want to add a section like the Star Theme Home Page with the Quotes in to January

Thanks

Comments

  • Posts: 422
    Hello :)

    Enable the "Stretch section" like in the attachment. This should do the trick because we don't use any special method :)

    Best Regards
    Daniel
    screenshot-rifetheme.com-2018.11.13-14-52-04.png
    1046 x 462 - 101K
    Lead Graphic Designer
  • Hi okay will try again as it didnt work without setting the columns to no gap :)
  • Hi - when I choose Full Width and Stretched the content falls off the side off the screen and is not responsive.

    What are your recommended page template settings to use Full Width as everything seems to use default template - I guess this is the theme default template??

    What do you suggest are the best page settings as theres a lot of choices - padding, no padding etc etc.

    Full Width Stretched in default template causes the content being too far across the screen

    Also what do you recommend as your boxed page width - I see 1200, 968 and other widths depending on what you have created in Elementor. Whats the box widths to stay responsive please. Im finding that if I do anything outside of your original design its not responsive

    Thanks
  • Posts: 422
    Hello again

    To be honest I'm not able to answer your question without any example. Your comment is too general ;)

    In almost all cases I use the "Stretch section" to stretch the background image or solid color to full width. I try to do not mix these two settings "Stretch" + "Full width", because for someone who is not familiar with Elementor paddings its hard to control a mobile resolution ;)

    Like you can see: http://nimb.ws/Mw7S6l with Elementor you can control almost every setting in each mobile view. You can set adjust paddings, margins, fonts and many more for each resolution so you need to experiment with switching to another view and change values.

    Best Regards
    Daniel
    Lead Graphic Designer
  • Hi - Thanks for the info.

    Leaving January to one side. If I add a new section to any page and then select full width the section is never full width without me stretching it. This is using the default template for the theme - started with Star so guess whatever the default is. Same issue with anything boxed - it has to be stretched

    All of your design elements work fine and I use a lot of them and just copy and paste. The issue comes if I try to add any new design elements to the page.

    E.g See screenshots - I want to add 4 Icon Boxes in a Full Width Section - the only way I can do this is to do either boxed + stretch or full width + stretch

    If I dont add stretch the content is boxed.

    All looks ok on desktop as long as I then add padding back to left and right but is not responsive at all on tablet - see screenshot.

    So my question is in Star Theme how do you add a fully responsive full width or boxed section to an existing page please. I really need to be able to add my own elements to yours. They all seem to be constrained inside the section.

    Many THanks

    Its local dev but easy to replicate just try to add 4 x columns with icon boxes

    I can only add 1 screenshot :)

    Screenshot 2018-12-09 17.43.36.png
    1920 x 1080 - 240K
  • Posts: 422
    Hello again

    I'm not 100% sure if it solves your problem, but we can try.
    These columns can look much better when you edit each column in this tablet resolution.
    You can do it by it pressing "edit" and adding 50 in this field: http://nimb.ws/jp4xQc
    Remember that you must add this value to every four columns :)
    Let me know what you think and if it not a solution send me more info.

    Best Regards
    Daniel
    Lead Graphic Designer
  • Hi

    Thanks. Im not sure why adding 50% column width will help??

    It will split 2 of the 4 columns to the line below??

    Tried it with a 3 column pricing table but it splits the table as the width has to add up to 100%.

    You can see the issue on the dev site page with the pricing table - social content or the home page with any 3 columns - all have same issue in landscape mode

    Is there some sort of side padding in your default page templates??

    Whats your standard page width and padding as Elementor PRO doesnt want to play nicely with your default template...

    I could switch to the Elementor Full Width but I guess that will impact your design elements as they were using the default template

    Thanks
  • Posts: 422
    Hello

    Please remember that I'm guessing all the time because I don't see a live website and I can't help you by reading only your comments ;)
    MyMetta said: Thanks. Im not sure why adding 50% column width will help??

    It will split 2 of the 4 columns to the line below??
    You sent me the screenshot, and from what I see you must split 4 columns into 2 on a lower resolution because it doesn't look good.

    You can also set smaller paddings: http://nimb.ws/4MSVQF but still it won't solve problems with 4 columns on lower resolutions.
    MyMetta said: Is there some sort of side padding in your default page templates??
    If you choose the Elementor Full Width, our paddings will not be available because Elementor will ignore them. But still, you can change these settings: http://nimb.ws/8CYj5U in a page details.
    MyMetta said: Whats your standard page width and padding as Elementor PRO doesnt want to play nicely with your default template...
    I can't say how it looks because I don't see it ;)
    but I'm almost sure that it should work fine.

    Best Regards
    Daniel
    Lead Graphic Designer
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!