2 replies [Last post]
revup67
revup67's picture
Offline
newbie
Last seen: 5 years 34 weeks ago
Timezone: GMT-7
Joined: 2014-10-04
Posts: 1
Points: 2

Hello

The web site in question is ocbirds.com. It uses Wordpress and a Theme in which CSS is used and allows for customization by adding CSS code

Currently, the custom code in question is:

@media (min-width: 993px) {
body .main {float:right;}
---------------------------------
The "@media" is the "Recent Posts" container. Some viewers have complained that the text with "recent posts" sits on top of the left image border (note the woodpecker on the web site on left border) making text viewing difficult to read. Of course I could change the text color and help mitigate the issue however I believe a better solution is to modify the CSS code by offsetting where the "Recent Posts" container sits as opposed to the image border.

The issue is noticeable on screens with a 1280 w resolution as on a 1920 w the layout is optimum.

Certainly open to any and all suggestions.

Thanks for the assistance

Rev

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 48 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi revup67 You may want to

Hi revup67

You may want to add a media query for the sizes between 1215 and 1400 with padding-left: 110px for contentclass;
something like:

@media(min-width:1215px) and (max-width:1400px) {
   .contentclass{
      padding-left:110px;
  }
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 30 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

A different tack

Were it me, I'd simply remove the background image on body. It conflicts with the banner images anyway, and its removal would be more friendly towards your visitors who are using laptops or simply prefer not to waste desktop space by running the browser maximized.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.