Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • July 19, 2018 at 3:46 pm #987454
    creativeyes

    Hi

    Please can you tell me how I adjust the boarders (top, left & right) and column gutter on this page https://theimplantcentre.com/home_july18, see this visual https://theimplantcentre.com/wp-content/uploads/2018/07/TIC_NewHome1.jpg

    Plus I’m also trying to stylise the text on the blue panels more in line with this https://theimplantcentre.com/wp-content/uploads/2018/07/TIC_NewHome2.jpg
    – Lato bold and larger for the headings
    – Lato Light for the sub text
    How do I control these?

    July 21, 2018 at 1:57 pm #988156
    Mike

    Hey Rupert,
    For the column padding, Please try this code in the General Styling > Quick CSS field:

    #top.page-id-3370 #main .container {
padding: 0px !important;
}
#top.page-id-3370 #main .container .content {
padding: 0px !important;
}

    For the blue sections, please go to and enable: Enfold Theme Options > Layout Builder > Show element options for developers
    so you can add a custom class to the text blocks for the headings & text, such as “blue-head” & “blue-text”
    Then you can use this code in the General Styling > Quick CSS field to adjust the font-size:

    .blue-head h3 {
font-size: 30px !important;
}
.blue-text p {
font-size: 20px !important;
}

    Best regards,
    Mike

    July 21, 2018 at 2:55 pm #988161
    creativeyes

    Many thanks Mike. A couple of other things:

    With regard to the first point
    – how do I reduce the gutter in the middle between the two columns?

    With the text on the blue panels
    – I’d like to make the sub text Lato Light
    – Plus how do I bring the left and right text margins in so the text isn’t so close to the edges?

    Many thanks

    July 21, 2018 at 8:10 pm #988201
    Mike

    Hi,
    To reduce the gutter, Please try this code in the General Styling > Quick CSS field:

    #top.page-id-3370 .post-entry-3370 .av-flex-placeholder {
    width: 2% !important; 
}

    currently it is set to 6% on your site, please adjust to suit.
    For the blue panels, we will add padding, so the text isn’t close to the edges.

    padding: 0 30px !important;

    we will also add font weight to have the Lato light, I went to Google fonts to find the correct weight number:

    font-weight: 300 !important;

    This is your new css with these adjustments:

    #top.page-id-3370 .post-entry-3370 .av-flex-placeholder {
    width: 2% !important; 
}
#top.page-id-3370 .blue-head h3 {
font-size: 30px !important;
padding: 0 30px !important;
font-family: Lato !important; 
}
#top.page-id-3370 .blue-text p {
font-size: 20px !important;
padding: 0 30px !important; 
font-family: Lato !important; 
font-weight: 300 !important; 
}

    Best regards,
    Mike

    July 22, 2018 at 10:07 am #988298
    creativeyes

    Many thanks Mike, that’s great. One final thing, the content of the bottom section of the page, footer and bottom bar have also all been stretched to the left and right edges https://theimplantcentre.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-22-at-09.01.21.png. I’d like them to not have this margin removed, like the bottom of the current homepage https://theimplantcentre.com/.

    Thanks
    Rupert

    July 22, 2018 at 1:41 pm #988368
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top.page-id-3370 #main #footer .container {
    padding: 0 50px !important;
}
#top.page-id-3370 #main #socket .container {
    padding: 0 50px !important;
}

    Please note that when you make this the homepage you will need to change the “page-id-3370” in all of the css to “home”

    Best regards,
    Mike

    July 23, 2018 at 10:07 am #988626
    creativeyes

    Many thanks Mike and point taken regarding moving it to the live homepage.

    One final thing, please can you tell me how to bring in the margins for the awards section https://theimplantcentre.com/wp-content/uploads/2018/07/NewHome1.jpg

    July 24, 2018 at 10:17 pm #989399
    Basilis

    Hi,

    .avia-builder-el-27 { padding-left: 20px; }
    avia-builder-el-31 { padding-right: 20px; }

    That should fix the problems.

    Best regards,
    Basilis

    July 25, 2018 at 10:54 am #989615
    creativeyes

    That doesn’t seem to have done what I’m after, the six awards are in 3 groups of 2 and this seems to have just affected to the first group.

    July 25, 2018 at 10:35 pm #989962
    Basilis

    Hi,

    The CSS is only those 3 columns, I checked again an it should effect only that, do u have the code live?

    Best regards,
    Basilis

    July 25, 2018 at 11:40 pm #989978
    creativeyes

    Yes the code is live but it seems to be effecting just the first column

    July 26, 2018 at 1:34 pm #990238
    Victoria

    Hi creativeyes,

    Best regards,
    Victoria

    July 26, 2018 at 2:04 pm #990254
    creativeyes

    I’m confused, I’ve looked at it in three different browsers, I’ve also cleared the cache in each and also purged the cache in WP but it still doesn’t look right to me. This is what I’m seeing https://theimplantcentre.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-26-at-12.55.18.png

    July 26, 2018 at 9:23 pm #990442
    Victoria

    Hi creativeyes,

    Which screen size are you using?

    Best regards,
    Victoria

    July 27, 2018 at 10:19 am #990610
    creativeyes

    15 inch MacBook Pro viewed at 100%

    July 29, 2018 at 2:57 pm #991060
    Victoria

    Hi creativeyes,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 1100px) {
  .avia-image-container.avia-align-center.avia-builder-el-no-sibling {
    margin-right: 10px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 30, 2018 at 11:54 am #991473
    creativeyes

    Many thanks. I did as you requested and ended up adding it to custom.css but the left image (2 awards) looks like it’s still got some code that’s making it smaller. Any ideas?

    July 31, 2018 at 11:37 am #991883
    Ismael

    Hi,

    I can’t reproduce the issue either — checked on Chrome Windows 7. This is what I see.

    Screenshot: https://imgur.com/a/65QrfGe

    Best regards,
    Ismael

    August 2, 2018 at 9:40 am #992779
    creativeyes

    That’s great, many thanks.

    August 4, 2018 at 5:57 am #993403
    Mike

    Hi,
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    August 6, 2018 at 11:57 am #993893
    creativeyes

    That seems to be resolved, thanks

    August 7, 2018 at 3:06 am #994180
    Mike

    Hi,
    Glad to hear, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘New homepage spacing & font size and weight issues’ is closed to new replies.