How to display different images on the Sidebar

Hi @kian1977,

You can simply use our this sidebar manager plugin which will help you in creating multiple sidebar and you can simply add the image in each of your sidebar and set the display rule according to yourself.

Hope this will help!

Thanks @deepakl,
I will give it a go.
There are a couple of pages where I don’t want to use a sidebar at all. For example, on my about page. Where I have removed the sidebar the formatting of the content has changed and I need to realign it.
I have tried adjusting the container width and alternating between ‘content boxed’ and just ‘boxed,’ but elements of my copy still appear full width on my about page. Do you by chance no know how to correct that without reinstalling the sidebars?
Thank you.

Hi @kian1977

I can see your about page and seems everything fine to me. If you still struggling with content width of your specific page then would you mind sharing a screenshot which depicts your issue?

Let me know.

https://kiannorthcote.com/wp-content/uploads/2019/01/portfolio.png

https://kiannorthcote.com/wp-content/uploads/2019/01/services.png

https://kiannorthcote.com/wp-content/uploads/2019/01/about-page.jpg

Hi Deepakl,
Here are three screenshots that might indicate the problem a bit more.
I want the content to align a bit more to the left, which is what I have
done in my visual editor but since removing some of the sidebars I can’t get
the copy to appear in a way that is a bit tidier and more streamlined.
Thanks.

• This reply was modified 6 years, 1 month ago by kian1977.

Hi @kian1977 ,

Do you wish to remove the padding from your layout. I opened your about page saw the the container size has default padding. Did you wish to have a layout without padding? just like here is the screenshot: https://bit.ly/2QMJQbH

If yes, then you should simply set your blog page layout to full width stretch or contained. Here is the screenshot: https://bit.ly/2VVfyqO

If you still need any further help then please open a ticket in our support center where we can help you in a better way.

Thanks, @deepakl
I’ve opened a ticket with the support center and in the meantime
I shall try what you suggest, although I have been experimenting
with the container fields so that I can get the content to appear
how I would – basically a bit tidier so that I don’t have really
uneven sentence lengths. The layout looks fine when I work in
editor mode on the pages, but when I hit publish I can’t keep
the same format.
If you don’t mind, I had one more quick question. Is there a piece
of CSS that will allow me to increase the size of bullet points
across my website? Something which is particularly noticeable when
viewing through a mobile device.

Thanks for all your help,
Kian

Hi @kian1977 ,

Glad you opened a ticket for your query. You would be responded soon regarding your initial query.

Meanwhile for your second queries I can provide you a css code that would increase the bullet points in your specific page & here it is:-

.page-id-35 .site-main ul {
    list-style: none;
    margin-left:20px;
}

.page-id-35 .site-main ul li:before {
    content: "\f111";
    font-size: 1em;
    padding-right: 8px;
    vertical-align: middle;
    margin-left: 0px;
    font-family:"Fontawesome";
   
}

If you wish to have all bullet points to be scaled in all the pages of your site then just remove the page id class from the above css and the property will follow in your entire site.

Hope this helps!

Hi @deepakl,

Thanks so much for all your help. I have pretty much fixed the content issues I was having now I think. Thank you for the CSS too. I gave it a go but I ended up with two sets of bullet points next to each other. As indicated in this screenshot.

https://kiannorthcote.com/wp-content/uploads/2019/01/Screenshot-8.png

How can I go about just having one set and making the text within the bullet points slightly larger? They are all part of the same block so I can’t change the text size?
Thanks, Deepakl.

I may not need to change the text size.

Hi @kian1977 ,

It seems like you missed the first part of the code which is also to be copied in your code.

this one:-

.page-id-35 .site-main ul {
    list-style: none;
    margin-left:20px;
}

Please input the whole code which I send you. That will do the job.

Hi @deepakl,

Thanks, that works really well on my desktop – I am much happier with how it all looks in that respect.
Sorry, I know that I am leaning on you heavily for support, but do you have any advice for improving the layout on mobile devices? For example, my subheaders, in red, are a good size for a desktop but appear far too big when viewing through a mobile?
Likewise, my bullet points are now a good size on my desktop but appear a little too small on my phone? Which is kind of frustrating!
I only have the free version of Astra. In order to make those kinds of changes am I likely to need the pro version?
Thanks again for all your helo, @deepakl.

Hi @kian1977 ,

Please use this CSS as well for setting your bullets points responsive:-

@media screen and (max-width: 768px){

  .site-main ul li {

    font-size:13px;
}
}

I am sure this will help you. Further you can opt for Astra Pro as you would find more features to explore and to work with it. That will surely ease your work.

Hi @deepakl,

Thanks very much, yeah that helps. Thank you for all your help over the
past few days. Much appreciated.

Kian