Border around Featured Images
-
Hi, the software is taking the content on the three pages in the Process section and converting it to a standard paragraph. That is being done by the theme itself and is not something we can change with CSS.
-
For the title, if you wish it centered, find this rule in your custom CSS and add the right and left margin declarations so it looks like this.
.home-section .section-head h3 { margin-left: auto; margin-right: auto; max-width: 50%; } -
Hi thesacredpath,
I only want the “Process” title to be center aligned. If I use the above CSS, it is changing the alignment of all the section headers.
If you see the port demo, just the Services header is center aligned.
https://portthemedemo.wordpress.com/
I think there is something in my CSS that has pushed Process to the left because when I first set it up, Process was is the middle, just above its sub-heading “what I do, and how I do it.” -
Ok, I somehow managed to get “process” in the middle like before!
but now, the Hot Off the Presses and the Recent Projects titles are in the center as well.
I realize now that Testimonials and Process follow the same CSS command…. and Hot off the Presses and Recent Projects are connected together. So I didn’t use your Testimonials CSS and viola, both Testimonials and PRocess are now center aligned (in sync with the port theme demo)However, unlike the demo, now, Hot off the Presses and Recent Projects are also center aligned, and they are supposed to be left-aligned.
-
Hi,
You can single out the Process title with
#featured-pages .section-head h3 { max-width: 100% !important; }This will make sure that only the Process title is modified. To only affect the testimonials title, you can use
#testimonials .section-head h3 { text-align: left; /* This aligns to the left but you can use other custom CSS code here to position it as you wish */ }We will try to help you get the look you want very soon.
-
haha, i don’t doubt that you will!
you both have already helped so much.so here’s the lowdown, because there is so much CSS on the site now, and somehow I have managed to align Process and Testimonials to the way I want (not using the CSS you wrote out above), i just need to left-adjust the headers of “Recent Projects” and “Hot Off the Presses”.
How can I single those headings out?
thank you :)
-
That’s great!
You only need this part to finally align the Recent Projects and Hot Off the Presses :)
@media screen and (min-width: 701px) /* Below this value it doesn't work well but you can try without it to see the result */ { .section-head .inside h3 { text-align: left; } }Hopefully this will help get things the way you want.
As a bonus, this code (if you want/need it) will center the footer widgets.
@media screen and (min-width: 777px) and (max-width: 933px) { .footer-box { margin: 0 10px 0 25px !important; width: 45%; } .footer-box.last { margin: 0 auto !important; text-align:center; } } @media screen and (max-width: 776px) { .footer-box { margin: 0 auto !important; float:none; width: 50%; } .footer-box.last { margin: 0 auto !important; text-align:center; } } -
the headings moved!
woohoo!and thanks for the bonus codes. tried using but nothing changed. maybe a bracket missing somewhere? :)
-
-
aha!
i see it now :)
thank you, thank you.Ok, so, I got the text in the Process section to be bullet points (got help from the theme creator). hopefully he’s going to help me figure out how to change the text to white from black and left-aligned.
but i was wondering if you could help me with CSS to either reduce the size of the Process image or to push all the text up the picture (including the title and all) because right now, that picture looks massive.
thanks again!
(i am so close to getting done!) -
Here it is:
@media screen and (min-width: 701px) { div#featured-pages { height: 460px !important; /* to modify the height of the background image */ padding-top: 20px; /* to set the space between the beginning of the image and the title "Process" */ } }Once again bonus for the bullet points alignment and color:
#content ul { color: #FFF; text-align: left; }Don’t worry at all we’re here to help as best as we can with any other changes you may need.
-
haha!
this is like magic :)ok, colors changed and text is left aligned.
is there a way to separately adjust the size of Process and the bullet headers (Ethnographic Research, Data Analysis, and Content Creation) so that PRocess is the biggest in font, then the bullet headers?
-
Sure there is, here you go:
#featured-pages .section-head h3 span { font-size: 1.1em !important; } -
and to reduce the padding between the bullet points so that each point is slightly closer to each other?
(please tell me to stop anytime!) -
also,
is it just me or the way the projects are featured on the home page on the demo (https://portthemedemo.wordpress.com/) takes up less space than mine does?in other words, do you think smaller image sizes for my project images will make them look smaller on the homepage?
-
You don’t need to stop until your website looks exactly the way you want and I am happy to help you achieve that :). This is the code you’ll need:
#content ul li { margin: 0; line-height: 1.4em; /* by reducing this you can bring the bullet points closer */ } -
beautiful, thank you.
i just updated the website with all six projects showing under “Projects.”
I’d like the project boxes to be smaller in size so they don’t take up that much space on the screen. Help please? -
Also, for the same Projects section, I am noticing now that the animation is not completing. Earlier, the name of the project would show up clearly when you hovered over an image. Like in the demo (https://portthemedemo.wordpress.com/). However now, the animation seems to be stunted. It doesn’t complete and so you don’t see the entire title of the project when you hover over the thumbnail.
could this have something to do with the width of this section or something?
-
Hello again,
I apologize for the delay, I have been quite busy today.
It seems that a script is used to move the Projects section images, therefore, it will be very tricky to make things look smaller without breaking the design when the screen size changes or if you add other projects.
Also, I don’t have access to the theme to try to see if there are any settings that can be modified in order to achieve what you want without breaking the flow.
We can reduce the space above and below the projects and make the images smaller with the code below but it doesn’t look very nice. I’ll leave the decision up to you :)
@media screen and (min-width: 701px) { #projects { padding-top: 20px !important; padding-bottom: 0 !important; } .project.small .inside { max-width: 250px !important; } }If however, you do not plan to change the projects section, I’d be happy to do all the Custom CSS needed in order to display them properly in all resolutions.
To bring back the gray overlay on the project images when you hover over them, please use the below code
#content .project.small .inside { background-color: #FFF; /* This hides a gray border that is displayed on some images */ } #content .project.small a:hover { background: rgba(0,0,0, 0.8); /* colors are from 0 to 255 and you can arrange the opacity with the last number 0 to 1 */ }However, I see that the FACTSET and CNBC images are smaller than the box which will cause a black border on the right side just as you’re hovering over them.
As always, please let me know if there is anything else you’d like to modify :)
Take care,
Onur
-
thank you so much :)
i’ve put the code on the website. made some tweaks and now have it to where i want it.
the projects looks fine on my google phone, even with reducing the padding so. can you tell me if it looks fine to you as well? on your phone?thank you.
could i also the CSS to increase the font size of the buttons on my homepage, right under the site title? thank you again!
- The topic ‘Border around Featured Images’ is closed to new replies.
WordPress.com Forums 