-
Posts
-
Hi! I’m trying to set a margin or padding for all contents including the header, title, and sliders like
http://www.clubmonaco.com/category/index.jsp?categoryId=12243591&ab=global_men
I tried to achieve this for the main menu header by inputing the following into the quick css
.fixed_header #header_main .container {
width: auto;
}
.responsive #header_main {
padding-left: 135px;
padding-right: 135px;
}
and I got what I wanted for the header, however when I resize my window the advanced slider right below the main menu header does not coincide with the size of the main menu.
I believe it’s an easy margin: 0, auto; or padding and width: auto; but I can’t seem to get that to work for everything on the site like how http://www.clubmonaco.com does their layout.
Please help!!
Hi,
What do you mean by does not coincide with the size of the main menu? I checked the link, the slider looks fine.
Can you give us a screenshot? You can use imgur, dropbox, mediafire etc.. to post images here.
Regards,
Ismael
This is the screenshot:
https://www.dropbox.com/s/071d2vamn338kzc/help.jpg
I basically want the “container?” (i think that’s what it’s referred to in css language) to be a certain size so that all my contents stay within the container and the margins correct itself accordingly when the viewers resize their safari or IE window so that the contents don’t have different margins all over the place (I think the command is margin: 0 auto; for that). Or we can do it vice versa so that the margin is set and the contents automatically rescale themselves to stay within the margins aligned (width: auto;??).
I’m basically OCD and I want everything to be aligned on the right and left hand sides
Thank you for your help Ismael!!!
Hi soulfabrics,
That is actually a pretty tall order. The theme uses media queries at a few different pixel widths to change the css for certain elements. What you would need to do is add the margin: 0, padding: 0 declarations to the needed selectors for each responsive adjustment with new media queries.
You can see an example in the custom.css file where we’ve added the basics for tablets, desktop and mobile.
So for each case where you don’t like the margin, you would adjust the margin or padding or container for large desktop size, regular view, tablets, mobile and possible small mobile (under 350 or so pixel width) depending on how the margins are inherited.
If you aren’t comfortable with that level of css customization I would recommend looking into a freelance developer and having all the changes added to a child theme style or at the very least the custom.css file.
Regards,
Devin
I’m sorry for the trouble but is there a way that you can show me an example of the code I need to input into the desktop section of my custom.css in order to achieve the aforementioned? You told me I need to add the margin: 0, padding: 0 declarations to the needed selectors but what are the names of those selectors I need to call out. Like for the advanced layer slider for instance or even the avia widget or product grid. What would I have to call them in the custom css for the margin:0 to be applied?
Is it like this? :
.ls-layer {
margin:0;
padding:0;
width: auto;
}
and if so what do I substitute “.ls-layer” in order to apply the declarations for the advanced layer slider?
Hi,
Please send the login details to ///.
Include “Kriesi” on the subject. Add the url of this thread on your email.
You can use the Custom Menu widget for the additional navigation on the sidebar.
Regards,
IsmaelIsmael is tagged on the topic for easy reference so hopefully he can point you in the right direction. The main thing is you’ll need to be able to pick out and target each class you want to modify on your own since there are so so many that will need to be changed.
A good starting point is watching this video on using Firebug: https://kriesi.at/support/topic/fyi-firebug-tutorial-for-wordpress-users
Regards,
Devin
- The topic ‘margin or padding for all contents including the header, title, and sliders’ is closed to new replies.