[Gandt]

Link to the hacked site so we can see this invisible text you speak of?

[Gandt]

Diane

If you have a link to your page, it would be easy to give you the needed css to fix the issue along with screenshots.

G

[Gandt]

Paaljoachim

I then suggest you give sublime text a try. They do allow you to select+collapse text. Even dreamweaver does it too. I was unable to google an equivalent function for Espresso.

G

[Gandt]

Went to your link and saw no social icons. Did you modify your demo site since you first wrote this post?
G

[Gandt]

Paaljoachim

The 'proper' way to go about this goes hand in hand with your code-editor.
Most decent code editors allow you to collapse blocks of code, which makesmoving around much easier.
What code/text-editor are you using?

G

[Gandt]

pettyc

I visited your link and didn't see any mobile queries or anything come into effect when the screen width reached the level of a mobile phone's width. Did you change something since you first wrote this post?

G

[Gandt]

imdiane, the scaling you want is possible, do take into consideration that if the image is 1140 pixels wide, it will look 'normal' under a large screen, yet a mobile phone with say, 480px in width would make the image scale down nearly three-fold, so that, even if the image will still cover the entire width of your screen, the height of the image will also be scaled down to about 66px. Is that what you are after?

[Gandt]

This reply has been marked as private.

[Gandt]

itskimical

Do you have an existing site or are you just about to begin building one?
If you already have one, the fix is quite simple.

If not, then any 'full width landing page' theme will do.

G

[Gandt]

Sethbahookey

The answer is simple, for whatever reasons, the css is not telling the button (an <a> tag) to go to the right, so it isn't. To correct this issue per se, just add these lines of code to your css:

.home-widgets .more-link {
display:block;
float:right;
}

This makes the button go to the right. However, it still doesn't look right. You could additionally give it a right margin or what have you but the root of the issue goes deeper.

The general issue with that part of your site is that the whole section is not properly styled. A quick solution off the top of my head, broken down into various steps:

.home-widgets .featuredpage .widget-wrap {
  margin: 0;
  padding: 30px;
  width: 100%;
}

(I changed the padding and margin values, removed margin:0 auto to avoid floating to the center since your content is not really centered per se, and gave some sideways padding to recreate the look - please tweak the padding values as needed. Last but not least I got rid of max-width, since it was messing with the new structure)

Now, you have an unused widget title creating unnecessary spacing, so we have to hide it:

.home-widgets .widget-title {
display:none;
}

Now we need to fix the ugly negative margins on

.home-widgets .featuredpage .entry .alignright
and
.home-widgets .featuredpage .entry .alignleft

just set them to

margin:0;

Last but not least, we now have to add a new class that will help us align images to the left, without all the ugly negative value margins and what not. For the sake of examples let's use this naming:

.align-image-left {
display: block;
float: left;
margin: 0;
}

To fix the 2nd part that has the image on the right, simply make a new css class with the opposite value:

.align-image-right {
display:block;
float:right;
margin:0;
}

Don't forget to add these classes to your <a> elements or the fixes won't come into play.
The finished fix now looks like this:

[Gandt]

pblosser

The reason theres a double quote appearing before each blockquote is because of this line of css:

content: ““”;

content is a css rule that generates content per se, and inside these two tags " and ", you specify which content you want to be generated. As it stands, the value has been set to “, the quotes you precisely want to remove.

So, simply remove that line of css (content: ““”;) from your code to get rid of the quotes.
To add the borders, do as Tom said and throw in a border rule with the values of your choosing:

border-left:10px solid black;

Where 10px = the width/thickness of the border
solid = the style of the border, it can be solid, dotted or dashed
black = the colour of the border

Regards
G

[Gandt]

Kaden

You want the text to be static, always, regardless of scroll, for that section?
You have a white footer at the bottom which is what generates the need to scroll down.

G

[Gandt]

kaden

I just opened your link and the css responsible for the background image seems to be stuck on a <script> tag. I strongly suggest you add it to your general stylesheet to begin with, for easier access, tweaking and testing.

Having said that, to answer your question, the vertical fill of the image depends on whether you want to page to have vertical scrolling to begin with. If the answer is no, then there's one method to solve it.

If there is to be scrolling however, then there's various options.

Please clarify further what is the desired final effect/result.

Cheers
G

[Gandt]

Arete

The css of the plugin can be overwriten with !important tags if the slider's css doesn't have !important as well. I opened the link you gave but all I see is whitespace. I should be able to give you an easy fix if you restore the visibility of your site.

Regards
G

[Gandt]

Everon, most likely you would need to throw in some lines of code to modify the html structure of the widget and hence, the position of the link inside it. HOWEVER, there might be a css fix for it, which would be simpler and recommended. In order to give you the fix, we need a URL so we can take a look at the site and give you the concrete answer.

Regards
G

[Gandt]

baseballfanatic2

To simply show the sidebar, you need to go to your css where the mediaquery is changing the styles for .content and .sidebar.

In essence, since both already have float left, you need to change their pixel values to percentages, for example:

.content {
float:left;
width:50%;
}

.sidebar {
float:left;
width:50%;
}

That would thus put both side by side on a 50% + 50% basis. Modify the values to achieve the desired effect. The problem, simply put, is that there just isn't enough space on small mobile phones to fit in your form unless you make it very small (reducing font-sizes and widths of input elements), which makes it harder to read.

Give the above a try and let me how it went.

Regards
G

[Gandt]

Keith, if you're working locally and cannot share a working URL, then the next best thing is a screenshot of the issue. Show me one and I'll gladly troubleshoot the issue for you.

G

[Gandt]

Munguti: what do you mean by 'folded' wrap? Do you have any samples of websites that have the effect you desire to implement? I do not yet understand what you're aiming for.

G

[Gandt]

gpriver

That depends on the starting rule and method. Since normally the effect is created by either opacity or a semi-transparent background, I'd suggest this:

Via css, set the background rule of the element you want to use as the cover or 'veil' to something like this:

background:rgba(0,0,0,0.5);

In this case, black set to 50% opacity. This rgba color format allows you to specify the opacity level (last value after the last comma inside the parenthesis, the first three values set up the actual colour). So, all you need is the colour of your choosing (I assume you'd have it in a #hex format like #FFFFFF) converted into rgba format. To do that, just use any HEX to RGBA converter online, for example:

http://hex2rgba.devoth.com/

White set to 75% opacity would thus be:

rgba(255,255,255,0.75)

Hope this helps
G

[Gandt]

Baseballfanatic2

The reason you're getting more than 1 row is simply because your nav items have nowhere else to go due to their current font-size and padding values. To play around with this, do the following:

@media screen and (max-width:600px) {

.nav-primary .genesis-nav-menu a {
font-size:13px;
padding:10px 8px;
}

}

Where @media screen and (max-width:600px) refers to css that will only execute when the browser window is 600px wide or less, which is more or less around the time your menu starts to break. It is just an approximate number, however, so please tweak it accordingly as you deem fit.

Cheers
G

[Author]

Posts