Announcement

Collapse
No announcement yet.

Middle Content Resize

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Middle Content Resize

    https://www.dakotariggers.com/
    Does anybody know how to control the size of the "middle" content of the home page? Our site is responsive but once you reach a certain width it stops stretching to fill the screen. Normally I wouldn't care but if you run a browser full screen, the home page carousel looks strange when its not fitting the entire width of the screen (1920 pixel width resolution or higher). I'm trying to find the css that is controlling this for the middle content but am striking out. Anybody have ideas?

    Annotation 2020-07-31 144709.jpg
    Last edited by kuhnhound; 07-31-2020, 02:48 PM.

  • #2
    kuhnhound

    I would be happy to help a fellow Dakotan... Even if you are in the south one...lol. It's ok, I am in California now anyway.

    Find this rule:

    #homeCarousel ul li a img {
    width: 100% !important;
    max-width: 1880px;
    margin: auto;
    }

    change to:

    #homeCarousel ul li a img {
    width: 100% !important;
    max-width: 1920px;
    margin: auto;
    }

    IN RED ABOVE (OR whatever your max screen size is. 1920 is general standard) Make sure that if you go larger than 1920 that you make your images larger so that they don't blur. Alternatively you can make the rule: max-width:100% although I would not advise doing so

    After changing the rule, be sure to clear your store cache, browser cache, and refresh.
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      Thanks for the quick response former Dakotan! Actually that max-width value is the first thing I tried, it didn't do the trick. It appears that all of the "middle" content maxes out the same width, so i'm sure i need to find the css for that container but i'm striking out.

      Annotation 2020-08-03 093345.jpg

      Comment


      • #4
        kuhnhound

        With the first image I assumed that you meant the middle content area holding the lead banner only.

        It's not a rule that is making the gap. All of your large content images are 1880px which is not wide enough to cover the general area.

        For example the Sling Fab image is only 1880px wide and that is not enough to cover the area. Make your large images larger than 1880px wide.

        If you want to use a rule, just add this to your active css file:

        #fullWidthBlock img {
        max-width: 1920px;
        width: 100% !important;
        }

        Clear store cache, browser cache, and refresh. But keep in mind that it is better to use properly sized images.

        Keep in mind that this is also in conjunction with the first rule I posted. Your images if not resized properly will need separate rules to make them larger.
        Last edited by thecartdesigner; 08-03-2020, 11:49 AM.
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          Sorry, I should have been more specific in my original post as to what i'd tried out. I have modified the css as you instructed to make the max-width of #homeCarousel ul li a img 1920px, as well as resized my images to 1920px. The fullWidthBlock section works just fine now, but the carousel is still maxing out at 1880px. I'm not sure what i'm missing.

          Comment


          • #6
            Your live rule still shows 1880px. Did you clear your store cache after saving the css?

            #homeCarousel ul li a img {
            width: 100% !important;
            max-width: 1880px;
            margin: auto;
            }
            TheCartDesigner.com
            Not 3dcart Owned or Operated
            100% Independent 3dcart Expert


            Follow Us on Twitter

            Comment


            • #7
              Turns out I was modifying the default_modified.css file, didn't change the all_modified.css file. I didn't even see that. Thanks for the help! Looks like we are in business now!

              Comment

              Working...
              X