Overwritten custom CSS

nfipsiteadmin · Member · Jan 3, 2017 at 9:26 am
Copy link

Add topic to favorites
Hi

I am working with the oxygen theme and trying to do several changes with custom css. In developer mode in the web browser it seems that some changes are included, while others are excluded (a line is drawn over the variable), for the exact same item. For instance I can change the font-size, but not color for the menu items (so I know the selection name is correct, it just won’t allow me to change color..)

Another example is that I want to reduce the size of the right sidebar and increase the content. I have the following in my custom css:
```
#tertiary {
	max-width: 20%;
}

#content{
	min-width:80%;
}
```
This does what I want, reduces right sidebar and increases content. The problem is that the sidebar is aligned left so that content and sidebar overlaps.

I add the following in the css:
```
#tertiary {
	max-width: 20%;
	float: right;
}
```
Now when I go to developer mode in the web browser I find that the float that I set has been overwritten (see attached image), or is unaccounted for.. While the width set to 20% is included.

1) I think that may be the issue I have with several of my css markups. Could anyone tell me why this happens, and if there is a workaround? I am new to css so this may be something obvious that I do not know about yet.

2) I noted that margin-left was set to -250px for the sidebar, I tried both changing margin-left to 0 and 250, but it did not have any effect.

The blog is not open for public yet, let me know if this is an issue in order for you to help me out.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 4, 2017 at 12:32 am
Copy link
Hi there, on the sidebar code, we need to use a bit more specific CSS selector. The following will work for that.
```
.page-template-showcase-php #tertiary {
	max-width:20%;
	float:right;
}
```
The width of the content area on Oxygen main page is set with a right margin. If you add this and then reduce the 37.3333333% value as required to you can get it to work with the above.
```
.page-template-showcase-php #content {
    margin-right: 37.33333333%;
}
```
nfipsiteadmin · Member · Jan 4, 2017 at 10:10 am
Copy link
Thank you for the quick reply. I understand now that the more specific class (.page-template-showcase-php) overrides the float option I tried to set.

I changed the css as you suggested and it works. I also ended up adding #tertiary, since any other page would not have the reduced width otherwise..
```
.page-template-showcase-php #tertiary, #tertiary {
	max-width: 22%;
	float: right;
}
```
The “specify more” helped me in the direction of finding proper css selector specification for the other elements and I believe I have all I need now.

Forgive me if this is going off-topic.. I had to add some css for the smaller screen devices, and as such I included css on mobile device. This adds of course the changes to the sidebar also on small devices (and now the sidebar floats right, instead of centered..). So I added the following:

@media only screen and (max-width: 480px) {
.page-template-showcase-php #tertiary, #tertiary {
max-width: 100%;
float: center;
}
.page-template-showcase-php #content, #content {
margin-right: 0;
}
}

Which solves the issue. What I’m really trying to ask is, how do I find the breakpoints for each individual theme? And is the process I’m going through here the best option while making sure to maintain the responsive design?
thesacredpath · Member · Jan 4, 2017 at 7:08 pm
Copy link
The code you have looks good. On finding break points, generally if you “inspect” or highlight the element you are wanting to find the breakpoint on, and then slowly narrow your browser window, when the layout changes, you will see the CSS in the web inspector change and typically you will see the media query breakpoint.

I use Firefox and have the Web Developer Extension installed and I can set it to show the viewport size in the tab I’m on. That is how I typically find breakpoints and then verify with the media query I find in the original CSS in the web inspector.

No items found.