Fit More Widgets on Wordpress Footer - css

My theme shows that I can fit up to 4 widgets in the footer as shown in the demo site here:
http://demo.woothemes.com/?name=simplicity
But I can only fit 2 on mine when I'd like to have 3. Here's my site for my assignment:
http://www.brightpixelstudios.com/
I'm guessing I'll need to modify the CSS. I'd really appreciate any suggestions!
Thank you in advance,
Will

It is possible, if you look at the output, yours says:
<div id="footer-widgets" class="col-full col-2">
But changing the output to:
<div id="footer-widgets" class="col-full col-4">
Divides the width into 4 parts.
I can't help much more without seeing the actual admin side of the website, but if the col-4 is set dynamically, then it'd be a setting you'd have to change for the theme in the admin side.

you can use 'BNS Add Widget' wordpress plug in to add a widget area to the footer of any wordpress theme.
This is the plug in link : http://buynowshop.com/plugins/bns-add-widget/

Related

The logo disappear in mobile environment

I am new to this website so there might be similar question.
I have created the website with Joomla using Bootstrap.
http://theeruditepen.com/
I needed to update the website and after I updated, everytime the top logo (the top of the page and image (theEruditePen_Logo1.png) disappear in the mobile environment.
It used to show before, but some update change made the logo disappear and I do not find out how to fix it...I really want to show this logo even the mobile environment on top of menu.
I would really appreciate any tips and help.
Thank you
<img
src="/templates/theeruditepen/images/theEruditePen_Logo1.png"
class="visible-tablet visible-desktop img-responsive"
>
Remove visible-tablet visible-desktop class from the image tag.
The above classes will show the image only on tablets and desktops, and will hide it on mobile devices.
If u want to show the image on all devices, then remove the classes.
Or you can add .visible-phone to make it visible on phones
I run into a similar issue in the past.. the solution for me it was the following:
First I checked the type of module in which my element was placed (custom module, articles module, category module, etc).
After that, I checked the especific module option configuration (image attached as an example) and set the mobile option to on. enter image description here
Hope it helps.

Custom CSS Coding/Coding Block for a Website

I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.

page layout auto change when trying to change browser zoom out

I designed a responsive web page which is best viewed in 1680px screen. But when i am going to zoom out the page using view menu of firefox, The page layout is auto change with two columns also the contents of the page is changed to worst design.
The url of the page is
http://www.tuitionok.com/website-demo/indofast/
Screen Shot of the page which is best view in 1680px or greater px.
(this is the layout which i want in all pixcel)
Screen Shot of the page which is worst / not proper in less than 1680px.
I want the layout will be same which is shown in (1680px) in all resolution (zoom out/zoom in).
Can you please help me?
you will have to make change in your CSS Class or i would suggest to use bootstrap, it is not too much complicated to align using bootstrap for eg
for mast head you can specify bootstrap class in one row and column space col-lg-12
<div class="row">
<div class="col-lg-12 col-md-12">
---- Your content goes here
</div>
</div>
please refer bootstrap documentation for more details from here http://getbootstrap.com/
You have to use the Grid System layout for perfect responsive website,
So you can use Bootstrap or Foundation 5.
See also http://www.hongkiat.com/blog/bootstrap-alternatives/

Make page images and content responsive, wordpress

I have a wordpress site which is responsive. In my home page there is a slider (responsive slider) Now i need to add some content below the slider with a small image and a one sentence description. There will be 3rows, in 1st row i need 3 images with 3 small descriptions , in 2nd and 3rd row 2images with descriptions. I need to make these responsive. Images and the small description should be responsive. I tried so many ways , but nothing works. Can anyone help me please?
Responsive layout design is 99.9% to do with your css and how you're writing it. Can you post any code examples? What theme are you using?
Some theme designers like Woothemes provide shortcodes for adding columns and rows of content that work responsively out of the box.
It's impossible to help any further until you provide more information :-)

Full Width Slideshow Above Content

I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks
What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/

Resources