Border around Featured Images

  • taapsir · Member ·

    Hi,
    I am seeing a border around my featured images under the Recent Projects section on the Homepage. Is there a way to make the border transparent? Thank you.

    The blog I need help with is: (visible only to logged in users)

  • ogurel · Member ·

    Hi Taapsi,

    I am not able to see a border around your featured images under the Recent Projects section on the Homepage. Do you still need help with this?

    If you do, if you can give more details I’d be happy to help.

    Take care,

    Onur

  • thesacredpath · Member ·

    Hi there, I’m not seeing any border on the featured images on your site and I see this is marked as resolved. Did you get this taken care of?

  • taapsir · Member ·

    I see it with borders on my mobile phone. sorry i missed that part. but it could be an issue with the size of my phone screen. do you see it that way too? with borders showing for the logos of the companies under Recent Projects?

  • thesacredpath · Member ·

    @taapsir, I checked your site and see no borders on my iPhone 5s with the latest iOS. Which phone/model and which version of the OS are you seeing the borders on?

  • taapsir · Member ·

    Hi Onur,
    It’s great that you don’t see it on your phone.
    I’m using a google nexus phone but if you don’t see it in yours, I’m not going to worry about the borders then. It’s a phone specific thing. No worries :) Can you however tell me how my site title and the three buttons under it About, Work, Blog show up on your phone? On my phone, all three are much below the level they are on on my laptop view. In fact, the buttons show up under the sea horizon line on my phone. Are the buttons visible to you? And are they all on one line under the DigitalDidi title? Thanks again :)

  • ogurel · Member ·

    Hello again,

    I was quite busy with family and guests in the last few days. I see that on some mobile versions, due to the code :

    #content .project.small .inside {
    background-color: #313131;
}

    You see a small border around the images. It is not there in all resolutions and it’s not a border but a background color which seems to seep from the sides. However if you just add the below custom CSS code, the border will disappear.

    #content .project.small .inside {
    background-color: transparent;
}

    For the menu items, as you said they are harder to read in orange and move just on or a bit below the sea horizon line at resolutions less than 700px. The below CSS code might help:

    @media screen and (max-width: 700px)
{
    #top-buttons .button {
        color: #000000; /* Changes the color to black */
        font-weight: bold !important; /* Makes the text bold */
        font-size: 14px !important;  /* Increases the size */
    }
}

    You can play with these to see what fits your needs best.

    As usual, please feel free to write back if you need anything else.

    Thanks,

    Onur

  • thesacredpath · Member ·

    The title and menu items are centered and look fine on my iPhone in both portrait and landscaping, but you may want to move the and title up just a little since the menu items are on the dark shoreline on your image. Add this to the 700px max width media query that Onur gives to move it up. You can test things and adjust the 550px value as desired. 

    #banner-text {
	margin-top: 550px !important;
}

    The end result would be this. 

    @media screen and (max-width: 700px)
{
    #top-buttons .button {
        color: #000000; /* Changes the color to black */
        font-weight: bold !important; /* Makes the text bold */
        font-size: 14px !important;  /* Increases the size */
    }
    #banner-text {
	margin-top: 550px !important;
    }
}

    Onur, nice job and thanks a lot for your help in the forums. It is greatly appreciated. :)

  • taapsir · Member ·

    Can I please say, THANK YOU, THANK YOU, THANK YOU.
    You have solved an issue that for a week I have been trying to resolve first by myself and then through live chat.
    You are both amazing :)

    All this worked like a charm.

    To continue my greed of having your assistance, can you please help me with how small the site logo looks on the mobile phone? Is it just my google phone or is the site logo very tiny on your mobile devices as well? I tried uploading different sizes of the logo itself but to no avail.

  • ogurel · Member ·

    It is my pleasure to try and help as much as I can and learn in the process :)

    I was pretty busy these last couple of days, I have to read all the replies and try to help them :)

  • ogurel · Member ·

    We can use the below CSS code to make the logo bigger but depending on it’s size it can “steal” a lot of height from the main content.

    @media only screen and (max-width: 700px)
    #header #logo img {
    max-height: 80px; /* You can modify this to modify the logo’s height */
    }

    Don’t worry at all, ask away if you have any other questions :)

  • taapsir · Member ·

    Hi Onur,
    That CSS doesn’t make any adjustments to the logo size.
    I put the size to 2000px and still nothing :)

  • ogurel · Member ·

    My apologies, an opening bracket was missing:

    @media only screen and (max-width: 700px)
{
    #header #logo img
    {
        max-height: 60px;
    }
}

    This will limit the mobile version logo size.

  • taapsir · Member ·

    yes! it works :)
    is there CSS to adjust the padding around the logo and site navigation button for the mobile phone?
    i tried using
    padding: 0 40px;

    but that didn’t work…

  • ogurel · Member ·

    This should work:

    @media only screen and (max-width: 700px)
{
    #header #logo img
    {
        max-height: 60px;
    }
    #header .inside {
        padding: 5px 5px 5px 0px !important;
    }
    #header #logo {
        margin-left: 10px !important;
    }
}

    This includes the existing logo size as well and will only affect resolutions less than 701 pixels.

  • taapsir · Member ·

    works like a charm :)

  • ogurel · Member ·

    Perfect!

  • taapsir · Member ·

    thank you!

  • ogurel · Member ·

    It’s a pleasure and feel free to ask if you need other modifications.

  • taapsir · Member ·

    really, just one more thing (i hope!)
    my Featured Pages section titled “Process”
    The title has shifted to the left for some reason.
    And I wanted the content to show up as bullet points but that section on the homepage seems to be formatted only to display as a paragraph.

    can you please look at it?
    thank you so much.

1 2 3
  • The topic ‘Border around Featured Images’ is closed to new replies.