Border around Featured Images
-
The Projects look fine for me too. The only thing I would add would be a bit of space between the View All button and the project images by adding this code
@media only screen and (max-width: 700px) { #projects .section-head { margin-bottom: 60px; } }To increase the font-size of the menu items:
#home-banner #banner-text .button { font-size: .9em; /* Modify this to make them as big as you want */ }If you want the menu items to have a background and be a bit more visible, you can use the below code as bonus:
#top-buttons ul { margin-top: 50px; } #top-buttons li { background-color: rgba(0,0,0,0.1); border-radius: 5px; margin-left: 10px; } #top-buttons .button { margin-right: 1px; background: transparent; color: #d2691e; padding: 2% 18% 2% 18%; line-height: 2 !important; } #top-buttons li:hover { background-color: rgba(0,0,0,0.2); line-height: 2 !important; }I also wanted to mention that for all the code where we specify a min or max-width like (@media screen and (min-width: 700px)) you can put all the code together so you won’t have to repeat the @media screen and (min-width: 700px) { Custom CSS code here } portion.
-
If you decide to use the bonus code, just a small correction:
Change
#top-buttons li:hover { background-color: rgba(0,0,0,0.2); line-height: 2 !important; }to
#top-buttons li:hover { background-color: rgba(0,0,0,0.2); } -
Onur,
Thanks so much!
I decided not to use the bonus codes but thanks for them anyway.
they are now in my library of codes for future use, if need be!Regarding the Projects section, I just changed the size from 300 to 260. I think i prefer this size. However now, a couple of questions:
1. is there a way to reduce the space between the line “What i do…” and the first line of logos? (i am trying to see how compact we can make it given the restrictions we are facing)
2. on the mobile device, the “View All” buttons for the Projects and Hot Off the Presses are not centered because of the CSS for the laptop view. Is there a way to fix this?
3. you said earlier that you might be able to do custom CSS for the projects for different resolutions. do you think that would be necessary? I am viewing the projects on the laptop view, ipad view and mobile view and they look. but i want to make sure i am not missing anything …separate question:
is the class, @media screen and (min-width: 700px), the same thing as @media only screen and (min-width: 700px) ?thanks again!
-
No problem at all :)
1. This code can make it even more compact:
@media only screen and (min-width: 701px) { #projects.home-section .section-head { padding: 0 30px 0px !important; margin: 0 auto -5px; /* You can use negative margins as well care must be taken not to overlap on other page elements */ } }2. This will center it for mobile devices:
@media only screen and (max-width: 700px) { div.viewAll { right: 0 !important; top:0 !important; } }3. I believe it is not necessary, nor practical as the code can easily break if/when you add more projects or change projects. The Projects section seems to be good like this.
For the separate question, I have found this explanation over at stackoverflow :)
@media (max-width:700px)This one is saying for a window with a max-width of 700px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
@media screen and (max-width:700px)This one is saying for a device with a screen and a window with max-width of 700px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.
@media only screen and (max-width:700px)Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as “only”, the style sheet should be ignored by older browsers.
I would actually suggest to group up all the CSS code in @media screen and (min-width: 701px) sections inside a @media only screen and (min-width: 701px) section and all @media screen and (max-width: 700px) sections inside a @media only screen and (max-width: 700px) to make the CSS cleaner and also only run it them supported browsers. I usually use @media screen (without only) as in my opinion, this will push those using really outdated browsers to use newer ones.
-
Hi Onur,
Sorry, didn’t get to my emails till tonight.
All the CSS you sent worked :)!
And thank you for the information.
Is there a way I could increase the size of the “Process” and reduce the size of the column headings under “Process” for the mobile view? (I already have the CSS for doing that on the desktop view.)Thank you!
-
Also, when I am on the blog page (http://digitaldidi.com/2015/11/27/to-stumble-or-not-to-stumble-how-to-tackle-isis-with-baby-steps/), the slide bar navigation button on the top right looks weird because the three lines are not centered in the box. I don’t see this issue on the button on the homepage. Any idea why this is happening?
-
Hello again. No worries at all, I am sure we all answer when we can :)
For the Process heading, you can use the first part of the below code:
@media only screen and (max-width:700px) { #featured-pages .section-head h3 span { font-size: 1.3em !important; } #featured-pages span { font-size: 1.1em !important; /* This is for the subheading size */ } }This will align the three horizontal lines on the slide-nav menu button.
.menu-toggle.contrast { text-align: center; }Enjoy!
-
Thank you :)!
This is the link to my resume page.
http://digitaldidi.com/curriculum-vitae/
Is there a way I can get the text to extend more to the right than it currently is? Right now, there is a lot of white space on the right.
Thanks again. -
To avoid breaking the blog layout, you can use this code to make sure your CV (located at http://digitaldidi.com/about/ I believe) takes up the whole width of the screen:
.two-thirds { width: 100% !important; }However, I believe you can change the format of this page to take a larger portion of the page through the page’s options. I don’t like the idea of modifying a major class which can affect your layout in the future.
I have verified the rest of your pages and this currently doesn’t seem to affect your layout.Unfortunately I am not able to test this theme, otherwise I could’ve maybe found the option to do so if at all possible.
-
Hi Onur,
I tried just changing the page template earlier to full-width but that makes the text too wide.
The code you sent also takes the page to the same full-page width as changing the page template.
Is there any way to find a sweet-spot between the default template and the full-width template?
(I have left your code in for now, so you can see how wide the text extends.) Thanks again. -
You can modify the width in the code to find the sweet spot.
You can use specific values such as 800px or percentages which will adapt to total width.
-
aah. great.
I wasn’t sure if I had to adjust the % or the “two-third” on the first line.
this works like a charm.
thanks so much!
I really appreciate all your help and your time for helping me with my website. you are very kind. i truly believe the heart of a volunteer is the biggest.
have a good night. -
It’s my pleasure. Thank you so much for your kind words :)
As usual feel free to ask if you need help with any other modifications on your website.
Have a great night!
-
Onur,
Hi :)! Can you believe I still help?
Is there a way I can change the font on the website? I want to use the Gotham font and I have it downloaded. It is not one of the font options available on wordpress premium right now and i don’t want to buy the Abobe Typekit.
Thanks much. -
On Typekit, we do not support the paid Typekit plans you can purchase there. You are limited to the Typekit fonts that are listed in the Customizer.
-
-
- The topic ‘Border around Featured Images’ is closed to new replies.
WordPress.com Forums 