Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • Author
    Posts
  • February 26, 2020 at 10:07 pm #1188283
    svreatt

    Is there a way to change the page margins? There is too much space on the right and left sides of the pages while using a sidebar. Screenshot.

    Thanks

    February 27, 2020 at 8:23 pm #1188606
    Victoria

    Hey svreatt,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    March 25, 2020 at 3:51 pm #1197700
    svreatt

    Sure thing. Thanks

    https://theaddictionsacademy.com/therapy-professionals/recovery-courses-and-certificate-programs/intervention-training/

    March 25, 2020 at 4:10 pm #1197705
    Jordan Shannon

    Hi,

    Add this to quick css:

    .template-page.content.av-content-small.alpha.units{
width:80%!important;
right:100px!important;
}

    Best regards,
    Jordan Shannon

    March 25, 2020 at 5:20 pm #1197760
    svreatt

    Thanks, better on the main content area. Now the content in the sidebar is very small.

    Nationally Certified Intervention Professional™ (NCIP)

    March 25, 2020 at 7:46 pm #1197830
    svreatt

    It looks more like the left and right page margins are the problem. I removed the code and the content in the sidebar returned to its original size.

    Thanks

    March 26, 2020 at 2:52 pm #1198053
    Victoria

    Hi svreatt,

    So do you need more help or it’s on as it is?

    Best regards,
    Victoria

    March 26, 2020 at 10:50 pm #1198176
    svreatt

    Yes I do. I was saying that with the fix you sent the content in the sidebar shrinks to half its size. So I removed the fix. I believe it is a page margin problem. I was just giving you feedback on what happened. Thanks

    March 28, 2020 at 4:12 pm #1198618
    Victoria

    Hi svreatt,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    April 30, 2020 at 5:59 pm #1208592
    svreatt

    Here are 2 screenshots of 2 sites that are completely the same except for content. Why it the blue site correct and the green site has these extra-large page margins. and have smaller content in the sidebar?

    I want to have the green site look the same as the blue site.

    Thanks

    https://theaddictionsacademy.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-30-at-11.55.28-AM.png

    https://theaddictionsacademy.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-30-at-11.53.14-AM.png

    May 3, 2020 at 3:30 am #1209207
    Mike

    Hi,
    Sorry for the late reply, I took a look at your link above and found that your margins are set to “auto” so the container width is what dictates the margins. This page is set to max-width: 1010px; where your other page is set to: max-width: 100%; This css will correct.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .responsive .container {
    max-width: 100% !important; 
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 3, 2020 at 3:34 pm #1209295
    svreatt

    Thank you for your response. So far no change on 3 different browsers.
    I’m not sure why one site is set to auto and the other is not. Where can I change this?

    Both sites have this setting.

    LayoutDimensions
    Responsive Site Turn on
    Maximum Container width 100%
    Enter the maximum content width for your site. Pixel and % are allowed eg: 1130px, 1310px, 100%

    I have tried changing the site back and forth from 100% to a px based size with no change.

    Thanks

    May 3, 2020 at 3:45 pm #1209299
    Mike

    Hi,
    Did you try adding the css to the WordPress > Customize > Additional CSS field? And clear your browser and site cache? When I test the css it seems to work so perhaps it’s a caching issue. Please include an admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    May 3, 2020 at 4:20 pm #1209303
    svreatt
    This reply has been marked as private.
    May 3, 2020 at 6:02 pm #1209319
    Mike

    Hi,
    Thanks for the login, I had to change it a little because the bootstrap.css was interfering:

    @media only screen and (min-width: 768px) { .responsive .container_wrap_first > .container {
    max-width: 100% !important; 
	width: 100% !important;
	padding: 0 50px !important
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    May 3, 2020 at 6:28 pm #1209321
    svreatt

    Perfect, Thank you!

    It’s interesting that the other site uses all of the same code, even the custom CSS.

    Thanks again.

    May 3, 2020 at 6:33 pm #1209323
    svreatt

    Looks like there is zero padding between the content and the sidebar. Can you add maybe 25px.

    Thanks again.

    May 3, 2020 at 7:22 pm #1209329
    Mike

    Hi,
    There was 50px of padding so I added this css to add a little more:

    @media only screen and (min-width: 768px) {
.responsive .container_wrap_first.sidebar_right > .container .content .entry-content-wrapper {
    padding-right: 100px !important; 
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    May 5, 2020 at 8:38 pm #1210077
    svreatt

    Thank you, that is much better.

    May 5, 2020 at 10:20 pm #1210096
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    May 5, 2020 at 11:59 pm #1210141
    svreatt

    Yes, that fixed the pages that have a sidebar, but the pages that don’t still have large margins.

    Is there a fix for them too?

    Thank you.

    May 6, 2020 at 1:40 pm #1210337
    Mike

    Hi,
    Please link to an example page without a sidebar that has the large margins.

    Best regards,
    Mike

    May 6, 2020 at 3:11 pm #1210361
    svreatt

    https://theaddictionsacademy.com/about-us-drug-and-alcohol-treatment/testimonials-cali-estes/

    May 7, 2020 at 12:47 pm #1210702
    Mike

    Hi,
    Thank you, this css would correct the margins:

    @media only screen and (min-width: 768px) { .responsive #main .container {
    max-width: 100% !important; 
	width: 100% !important;
	padding: 0 50px !important;
    text-align: center !important;
}
}

    but with that page being two centered columns, I added the text-align: center but I’m not sure if every page should be centered, or only one? Please check your pages and advise.

    Best regards,
    Mike

    May 7, 2020 at 4:03 pm #1210755
    svreatt

    Thank you. i did remove the text-align. It didn’t change the 2 volume setup.

    I have a question about the @media only screen and (min-width: 768px).

    I originally added this code for the form on the front page. I have redesigned that page and removed the form.

    Is this code targeted at just that. If so I could experiment with removing it.

    Trying to keep things as clean as possible.

    Thanks again for all of your help.

    May 8, 2020 at 12:00 pm #1210996
    Mike

    Hi,
    If you have redesigned the page and don’t need the css then you could remove it.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    May 8, 2020 at 4:28 pm #1211078
    svreatt

    Thank you so much for your help.

    I forgot that code was to make my sidebar a different color.

    Unless you have better code for that now that I could try.

    Thanks

    May 9, 2020 at 1:26 pm #1211385
    Mike

    Hi,
    Sorry, I’m not sure what you mean, so far we have not looked at any code for color, are we successful with the margins and now are on a new topic? Typically we prefer to keep each thread on a single topic, but I’m not seeing anything out of place with your sidebar color?

    Best regards,
    Mike

    May 11, 2020 at 4:42 pm #1211860
    svreatt

    There is nothing wrong with the color. I used this code to add color to the sidebar.

    My question is there a better way to add color to the sidebar then this code I’ve been using?

    @media only screen and (min-width: 768px) {
    .container_wrap.sidebar_right{
    background:-webkit-gradient(linear,right top,left top,color-stop(#f1f1f1,0.325),color-stop(white,0));
    background:-webkit-linear-gradient(right, #f1f1f1 32.5%, white 0%);
    background: -moz-linear-gradient(right, #f1f1f1 32.5%, white 0%);
    background: -o-linear-gradient(right, #f1f1f1 32.5%, white 0%);
    background: linear-gradient(right, #f1f1f1 32.5%, white 0%);
    }
    }

    Thanks

    May 12, 2020 at 11:19 am #1212086
    Mike

    Hi,
    Thank you, your sidebar css is probably best as it is.

    Best regards,
    Mike

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • The topic ‘Left and right page margins too large’ is closed to new replies.